指定flexbox flex项目的宽度：宽度还是基础？

问题描述

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

Say I'm doing 3 flex columns, first one 50%, the other two auto adjust.

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

或

.half {
    flex: 0 0 50%;
}

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

These seem to be functionally the same. Are they?

推荐答案

最下面的语句等效于：

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

在这种情况下，这是等效的，因为不允许该框

Which, in this case, would be equivalent as the box is not allowed to flex and therefore retains the initial width set by flex-basis.

Flex-basis定义元素的默认大小，然后分配剩余空间，因此如果允许该元素弯曲（增长/缩小）它可能不是页面宽度的50％。

Flex-basis defines the default size of an element before the remaining space is distributed so if the element were allowed to flex (grow/shrink) it may not be 50% of the width of the page.

我发现我经常返回获取有关flexbox的帮助：）

I've found that I regularly return to https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for help regarding flexbox :)

这篇关于指定flexbox flex项目的宽度：宽度还是基础？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！