控制在弹性容器中垂直排列的弹性项目的宽度

Question

我正在尝试实现标记为 "HALF" 的框仅占宽度的 50%（也就是它们均匀分布在第一行）的效果。

基本要求是将它们放在一个容器中。这可以使用 flexbox 实现吗？

我试过 flex-grow、flex-shrink 和 flex-basis，但恐怕我不明白如何让它工作，或者它是否正常可能，考虑到单个容器的要求。

考虑这个 fiddle：http://jsfiddle.net/GyXxT/270/

div {
  border: 1px solid;
}

.container {
  width: 400px;
  display: flex;
  flex-direction: column;
}
.child {
  
  height: 200px;
}
.child.half {
  flex: 1 1 10em;
  color: green;
}

.child:not(.half) {

  flex-shrink: 2;
  flex-basis: 50%;
  color: purple; 
}

<div class="container">
  <div class="child half">
    HALF
  </div>
  
  <div class="child half">
    HALF
  </div>
  
   <div class="child">
    FULL
  </div>
   <div class="child">
    FULL
  </div>
  <div class="child">
    FULL
  </div>
   <div class="child">
    FULL
  </div>
</div>

Answer 1

弹性尺寸属性——flex-grow、flex-shrink、flex-basis 和 flex——仅沿主轴弹性容器。

因为你的容器是flex-direction: column，主轴是垂直的，这些属性控制的是高度，而不是宽度。

要在列方向容器中水平调整弹性项目的大小，您需要 width 属性.

（这里有更详细的解释：）

要使用单个容器实现布局，请参阅。

如果您想保持列方向，您需要将 .half 元素包装在它们自己的容器中。

.container {
  display: flex;
  flex-direction: column;
  width: 400px;
}
.container > div:first-child {
  display: flex;
}
.child.half {
  flex: 1 1 10em;
  color: green;
  width: 50%;
}
.child {
  height: 200px;
  width: 100%;
  border: 1px solid;
}
* {
  box-sizing: border-box;
}

<div class="container">
  <div><!-- nested flex container for half elements -->
    <div class="child half">HALF</div>
    <div class="child half">HALF</div>
  </div>
  <div class="child">FULL</div>
  <div class="child">FULL</div>
  <div class="child">FULL</div>
  <div class="child">FULL</div>
</div>

Answer 2

而不是 flex-direction: column，您可以尝试 wrapping flexbox 使用 flex-wrap: wrap；你可以设置：

flex-basis: 50% 半宽 div
flex-basis: 100% 用于全宽 div

看到我在使用 flex-basis.

时投入了 box-sizing: border-box 来调整宽度

参见下面的演示：

div {
  border: 1px solid;
  box-sizing: border-box;
}
.container {
  width: 400px;
  display: flex;
  flex-wrap: wrap;
}
.child {
  height: 200px;
}
.child.half {
  flex-basis: 50%;
  color: green;
}
.child:not(.half) {
  flex-basis: 100%;
  color: purple;
}

<div class="container">
  <div class="child half">
    HALF
  </div>

  <div class="child half">
    HALF
  </div>

  <div class="child">
    FULL
  </div>
  <div class="child">
    FULL
  </div>
  <div class="child">
    FULL
  </div>
  <div class="child">
    FULL
  </div>
</div>

Answer 3

The base requirement is that they remain in a single container.

这也可以在没有 flexbox 的情况下完成，只需浮动 2 half 个元素

div {
  border: 1px solid;
  box-sizing: border-box;
}
.container {
  width: 400px;
}
.child {
  height: 200px;
}
.child.half {
  float: left;
  width: 50%;
  color: green;
}
.child:not(.half) {
  width: 100%;
  color: purple; 
}

<div class="container">
  <div class="child half">
    HALF
  </div> 
  <div class="child half">
    HALF
  </div>
  
   <div class="child">
    FULL
  </div>
   <div class="child">
    FULL
  </div>
  <div class="child">
    FULL
  </div>
   <div class="child">
    FULL
  </div>
</div>

Answer 4

如果目的是以 CSS 单位或百分比（提到的问题）对大小进行硬编码，@kukkuz 的解决方案是好的。

如果你想根据自己的内容调整元素宽度，那么 align-tems: flex-start 或类似的可以完成这项工作。可以处理与 flex 布局本身垂直的维度。查看 doc 页面底部的测试人员

（老问题，但之前的回答不完整，有些误导）

控制在弹性容器中垂直排列的弹性项目的宽度

Control width of flex items arranged vertically in a flex container

html

css

word-wrap

flexbox