Flexbox使一项比其他项大4倍 [英] Flexbox make one item 4x bigger than other items
问题描述
我正在查看此Flexbox备忘单:
我想使bigitem比smallitem大4倍，而不是使其大2倍，但是我不知道该怎么做?！我尝试用4代替2，但没有用.
我想将bigitem的大小比smallitem大4倍，而不是使其大2倍，但是我不知道该怎么做?！
请勿为此任务使用 flex-grow .使用 flex-basis .
.bigitem {flex:0 0 80％;}/* flex-grow，flex-shrink，flex-basis */.smallitem {flex:0 0 20％;} flex-grow 属性实际上没有设置flex项目的大小.它在容器中分配可用空间.
所以 flex:4 0 0 处于一项，而 flex:1 0 0 处于另一项，意味着:
- 确定主轴线(在本例中为行)上的可用空间量
- 将该金额除以五.
- 一项消耗四部分.
- 另一项消耗一个零件.
因为您只处理可用空间，所以4比1的 flex-grow 不一定意味着一个项目的大小将是另一个项目的4倍.这意味着一个项目将消耗比另一个项目多4倍的可用空间.
这也意味着 flex-grow 值分别为8、2、16、4、20和5等，会产生完全相同的结果，因为比例是相同的.
有关更多详细信息，请参见此处:
I am looking at this Flexbox cheat sheet:
http://www.sketchingwithcss.com/samplechapter/cheatsheet.html#wrapcolumn
Here we have an example:
I want to make the bigitem 4x bigger than the smallitem, not 2x as big, but I cannot figure out how to do that?! I tried substituting 4 for 2 and no that didn't work.
I want to make the bigitem 4x bigger than the smallitem, not 2x as big, but I cannot figure out how to do that?!
Don't use flex-grow for this task. Use flex-basis.
.bigitem { flex: 0 0 80%; } /* flex-grow, flex-shrink, flex-basis */
.smallitem { flex: 0 0 20%; }
The flex-grow property does not actually size flex items. It distributes free space in the container.
So flex: 4 0 0 on one item, and flex: 1 0 0 on the other item, means the following:
- Determine the amount of free space on the main axis line (the row, in this case)
- Divide that amount by five.
- One item consumes four parts.
- The other item consumes one part.
Because you're dealing only with free space, the 4 vs 1 flex-grow doesn't necessarily mean one item will be 4x the size of the other. It means that one item will consume 4x more free space than the other.
It also means that flex-grow values of 8 vs 2, 16 vs 4, 20 vs 5, etc., will yield the exact same result, because the proportions are the same.
See here for more details:
这篇关于Flexbox使一项比其他项大4倍的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
