Fatal编程技术网
  • html/
  • Html Flexbox使一件物品比其他物品大4倍

Html Flexbox使一件物品比其他物品大4倍

html css

Html Flexbox使一件物品比其他物品大4倍,html,css,flexbox,Html,Css,Flexbox,我正在看这张Flexbox备忘单： 这里我们有一个例子： 我想让bigitem比smallitem大4倍，而不是2倍，但我不知道怎么做？！我试着用4代替2，但没有成功 我想让bigitem比smallitem大4倍，而不是2倍，但我不知道怎么做 不要为此任务使用flex-grow。使用弹性基础 .bigitem { flex: 0 0 80%; } /* flex-grow, flex-shrink, flex-basis */ .smallitem { flex: 0 0 20%; }

我正在看这张Flexbox备忘单：

这里我们有一个例子：

我想让bigitem比smallitem大4倍，而不是2倍，但我不知道怎么做？！我试着用4代替2，但没有成功

我想让bigitem比smallitem大4倍，而不是2倍，但我不知道怎么做

不要为此任务使用
flex-grow
。使用弹性基础

.bigitem { flex: 0 0 80%; } /* flex-grow, flex-shrink, flex-basis */

.smallitem { flex: 0 0 20%; }

flex-grow
属性实际上并不调整flex项的大小。它在容器中分配自由空间

因此，一个项目上的
flex:4 0
，另一个项目上的
flex:1 0 0
表示以下内容：

  • 确定主轴线上的自由空间量（本例中为行）
  • 把这个数除以五
  • 一个项目消耗四个部分
  • 另一项消耗一部分
因为您只处理可用空间，所以4 vs 1
flex grow
并不一定意味着一个项目的大小是另一个项目的4倍。这意味着一个项目将消耗比另一个多4倍的可用空间

这也意味着
flex grow
值8 vs 2、16 vs 4、20 vs 5等将产生完全相同的结果，因为比例相同

有关更多详细信息，请参见此处：

我试过flex:400<编码>flex:4不同于
flex:40
flex:4
是
flex:4 0 auto的缩写我还尝试了flex grow:4，对于bigitem，这不起作用，我正在Google Chrome上尝试。我想问题是，我在输入标签周围有一个div，我在向外部div添加flex样式，而不是输入，不确定为什么添加到外部div不起作用。@chazsolo不，
flex:4
是
flex:4 1 0