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

【问题标题】：Control width of flex items arranged vertically in a flex container控制在弹性容器中垂直排列的弹性项目的宽度
【发布时间】：2020-09-03 04:08:27
【问题描述】：

我正在尝试实现标记为“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>

【问题讨论】：

标签： html css flexbox word-wrap

【解决方案1】：

除了flex-direction: column，您可以尝试使用flex-wrap: wrap 的包装 flexbox；你可以设置：

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>

【讨论】：

有一个更简单的方法，虽然只适用于 Firefox 和 Chrome：在子元素上添加以下属性将限制它们的大小以适应它们的内容：width: -moz-max-content 和 width: max-content

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

虽然这是事实，但我完全忽略了这一点，但 flexbox 方法更接近预期的效果。对于 50% 的宽度，当屏幕变小时，有时 50% 太小了。 flexbox 方法只是在第二个项目不适合时将其放下，这就是我想要的效果。您的方法可以通过媒体查询做出响应，但 flexbox 对我来说就足够了。谢谢，点赞
@parliament 当然，谢谢......注意，通过给half 元素一个最小宽度将做同样的事情......并结合媒体查询，这两种解决方案都需要，你可以让它们在包装后全部装满

【解决方案4】：

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

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

（老问题，但以前的答案不完整，有些具有误导性）

【讨论】：