如何将flexbox的第一个子元素设置为全角，并将所有其他查尔兹设置为flex:1（用于分隔空格）？就像这样：
flex:1
u0njafvf1#
您可以将:first-child的宽度设置为100%，并将其余查尔兹:not(:first-child)设置为flex: 1。要将它们放在多行上，请在容器上使用flex-wrap: wrap：第一个
:first-child
100%
:not(:first-child)
flex: 1
flex-wrap: wrap
gab6jxml2#
第一件物品加上width: 100%;，其他物品加上flex: 1;。第一个
width: 100%;
flex: 1;
efzxgjgh3#
另一个解决方案使用flex-basis选项（使用flex: 1 1 100%时的第三个值）。MDN link for flex-basis第一个
flex-basis
flex: 1 1 100%
yrdbyhpb4#
我发现这个解决方案很简单。只需要设置所需的子项高度。
<div style={{ display: 'flex', flexWrap: 'wrap', gap:'32px'}}> <div style={{ flex: '0 0 100%' }}>Some content</div> <div style={{ flexGrow: 1 }}>Some content</div> <div style={{ flexGrow: 1 }}>Some content</div> </div>
4条答案
按热度按时间u0njafvf1#
您可以将
:first-child的宽度设置为100%，并将其余查尔兹:not(:first-child)设置为flex: 1。要将它们放在多行上，请在容器上使用
flex-wrap: wrap：第一个
gab6jxml2#
第一件物品加上
width: 100%;，其他物品加上flex: 1;。第一个
efzxgjgh3#
另一个解决方案使用
flex-basis选项（使用flex: 1 1 100%时的第三个值）。MDN link for flex-basis
第一个
yrdbyhpb4#
我发现这个解决方案很简单。只需要设置所需的子项高度。