指定 flexbox 弹性项目的宽度：宽度还是基础？ [复制]

Posted 2023-03-06

【中文标题】指定 flexbox 弹性项目的宽度：宽度还是基础？ [复制]

【英文标题】：Specifing width of a flexbox flex item: width or basis? [duplicate]

【发布时间】：2016-07-20 11:15:05

【问题描述】：

假设我正在做 3 个 flex 列，第一个 50%，另外两个自动调整。

.half 
    flex: 0 0 auto ;
    width: 50% ;

或

.half 
    flex: 0 0 50%;

这些似乎在功能上是相同的。是吗？

【参考方案1】：

下面的语句等价于：

.half 
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 50%;

在这种情况下，这相当于盒子不允许弯曲，因此保留了 flex-basis 设置的初始宽度。

Flex-basis 定义了在分配剩余空间之前元素的默认大小，因此如果允许元素伸缩（增长/缩小），它可能不是页面宽度的 50%。

我发现我经常返回 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 寻求有关 flexbox 的帮助 :)