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

【问题标题】：Specifing width of a flexbox flex item: width or basis? [duplicate]指定 flexbox 弹性项目的宽度：宽度还是基础？ [复制]
【发布时间】：2016-07-20 11:15:05
【问题描述】：

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

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

或

.half {
    flex: 0 0 50%;
}

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

【问题讨论】：

标签： css flexbox

【解决方案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 的帮助 :)

【讨论】：