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

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>

原文由 parliament 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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>

原文由 kukkuz 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

The flex sizing properties – flex-grow , flex-shrink , flex-basis and flex -- work only along the main axis of the flex container.

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

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

（这里有更详细的解释： flex-basis和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>

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议