本文介绍了指定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项目的宽度:宽度还是基础?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-23 03:41