控制柔性容器中垂直排列的柔性物品的宽度

Question

我试图达到标记为“HALF”的框的效果，仅占据宽度的50％（也就是说它们均匀地共享第一行）。

基本要求是它们保留在单个容器中。这有可能实现使用flexbox吗？

我尝试过玩flex-grow，flex-shrink和flex-basis，但我担心我不理解如何使其工作，或者如果它甚至可能，考虑到单个容器的要求。

考虑一下这个小提琴：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-direction: column，你可以尝试使用flex-wrap: wrap包装flexbox;你可以设置：

1. flex-basis: 50%为半宽div
2. flex-basis: 100%为全宽div

看到我在box-sizing: border-box中投入使用flex-basis时调整宽度。

见下面的演示：

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 2

柔性尺寸特性 - flex-grow，flex-shrink，flex-basis和flex - 仅沿柔性容器的主轴工作。

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

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

（这里有更详细的解释：What are the differences between flex-basis and width?）

要使用单个容器实现布局，请参阅another answer to this question。

如果你想保持列方向，你需要将.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 3

基本要求是它们保留在单个容器中。

这也可以在没有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>