css 为flexbox子对象设置宽度但让其折叠？

tpgth1q7 于 2023-06-07 发布在其他

关注(0)|答案(1)|浏览(241)

我已经为左右列设置了flex: 1，这是为了始终使中间列集中，即使左右列的宽度不同。
但是，我如何设置中间列的宽度，当屏幕变得太窄时，中间列变得小于它的设置宽度？

.container {
  display: flex;
}

.left {
  flex: 1;
  background: yellow;
}

.middle {
  background: blue;
  width: 200px;
}

.right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  background: red;
}

<div class="container">
  <div class="left">
    Left column
  </div>
  <div class="middle">
    Middle column
  </div>
  <div class="right">
    Right column
  </div>
</div>

https://jsfiddle.net/u3vy0fgs/5/

css

来源：https://stackoverflow.com/questions/76367350/set-a-width-for-a-flexbox-child-but-let-it-collapse

1条答案

按热度按时间

4dc9hkyq1#

.container {
  display: flex;
  justify-content: center;
}

.left {
  flex: 1 0 0;
  min-width: fit-content;
  background: yellow;
}

.middle {
 background: blue;
 flex: 0 2 200px;
}

.right {
  flex: 1 0 0;
  min-width: fit-content;
  text-align: right;
  background: red;
}

<div class="container">
<div class="left">
Left column
</div>
<div class="middle">
Middle column
</div>
<div class="right">
Right column
</div>
</div>

你需要做一些改变来实现你所追求的。
1.您正在显式设置.middle的宽度。您需要将其转换为使用flex-basis。这将允许FlexBox处理大小。
1.您需要在.middle元素上启用flex-shrink。这将允许FlexBox自由考虑与其他元素相比元素的收缩。
1.您需要在.left和.right元素上禁用flex-shrink。这将防止它们缩小到低于其内容宽度。这与#2相结合将使FlexBox更喜欢收缩具有较高flex-shrink值的元素。
1.为了使中间的元素真正居中，需要确保.left和.right的flex-basis相等。在我的示例中，我将它们都设置为零。要防止文本在这些元素中换行，请确保将min-width: fit-content添加到.left和.right。

注意：在我的代码片段中，我使用了flex简写属性 *

赞(0）回复(0）举报 2023-06-07

我来回答

css 为flexbox子对象设置宽度但让其折叠？

1条答案

相关问题

热门标签

最新问答