首页 文章

Flex盒容器宽度不增长[重复]

提问于
浏览 次
15

这个问题在这里已有答案：

在默认行方向上使用弹性框时，容器高度会增加以包含所有弹性项，即使它是绝对定位的 .

#container {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
}

#container > div {
  flex: 0 0 200px;
  height: 200px;
}

见http://codepen.io/tamlyn/pen/dPjLoN/?editors=110

但是，如果将flex方向更改为column，则容器将折叠到单个flex项的宽度，即使这些项包装到下一列也是如此 .

#container {
  position: absolute;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

#container > div {
  flex: 0 0 200px;
  width: 200px;
}

见http://codepen.io/tamlyn/pen/rarbeN?editors=110

如何在 column 模式下使容器包含所有弹性项目？

css css3 flexbox

3 回答

  • 4

    我是世界上最完美的东西 . 这是：http://codepen.io/anon/pen/vEPBKK

    这里的技巧是创建一个 visibility: collapsed 容器 . 在flex中， visibility: collapsed 对象将自己从正常的flex流中移出，但为了布局而保留它们的尺寸 . 这会将弹性容器加宽到所需宽度，但不会影响弹性项目 . 但是有一些警告：

    • 这需要一点摆弄 . 正如您所看到的，魔法 <div> 是一个设定宽度，但它使用 :nth-child 来确定它前面有多少个框 . 如果您的实际设计中断多于或少于3行，那么您肯定必须调整对象的宽度 .

    • 由于渲染错误，这在IE中不起作用 . 幸运的是，IE 's incorrect implementation does exactly what you wanted in the first place without any changes so all you have to do is give IE it'自己的样式表带有一些条件语句并且拍摄了 div.magic 一些好老 display: none .

    HTML

    <div id="container">
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="magic"></div>
</div>

    CSS

    #container {
  position: absolute;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: 1px solid #f00;
  height: 650px;
  padding: 1px;
}

#container div.fb {
  border: 1px solid #555;
  flex: 0 0 200px;
  background-color: #ccc;
  width: 200px;
  margin: 1px;
  height: 200px;
}

#container > div.magic {
  height: 0;
  margin: 0;
  padding: 0;
  visibility: collapsed;
}

#container > div.magic:nth-child(5),
#container > div.magic:nth-child(6),
#container > div.magic:nth-child(7) {
  width: 408px;
}

#container > div.magic:nth-child(8),
#container > div.magic:nth-child(9),
#container > div.magic:nth-child(10) {
  width: 612px;
}

#container > div.magic:nth-child(11),
#container > div.magic:nth-child(12),
#container > div.magic:nth-child(13) {
  width: 816px;
}
    回复于
  • 0

    我认为这是你正在寻找的CSS：

    #container {
  display: flex;
  flex-flow: row wrap;
  border: 1px solid #f00;
  padding: 1px;
}

#container > * {
  border: 1px solid #555;
  background-color: #ccc;
  height: 200px;
  width: 200px;
  margin: 1px;
}

    “容器”将始终是容器的宽度，在本例中是页面，但现在这些框将在其中正确调整 .

    如果我误解了你的问题，请告诉我 .

    Update

    我已经玩了几天你所要求的东西了，看起来似乎不可能做你所要求的......至少不是你要问的方向 .

    容器希望成为可能的最大宽度 . 除非你强制容器是精确的宽度，否则它不会是整个宽度，但它也不会随着弯曲内容而弯曲 .

    回复于
  • -2
    .flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
  border: 1px solid #f00;
}

.flex-item {
  background-color: #ccc;
  padding: 5px;
  width: 200px;
  height: 150px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
  border: 1px solid #555;
}

    <div id="container" class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
</div>

    第一次尝试我不明白你的意思作为参考资料你可以看到这个教程https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    回复于

相关问题