Flexbox 中的第一个孩子全宽 [英] First-child full-width in Flexbox
本文介绍了Flexbox 中的第一个孩子全宽的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何将 flexbox 的第一个孩子设置为全宽,而其他所有孩子都设置为 flex:1
(用于分割空间)?
像这样:
解决方案
您可以将 :first-child
设置为 100%
的宽度,其余部分孩子的 :not(:first-child)
到 flex: 1
.
要将它们放在多行上,请在容器上使用 flex-wrap: wrap
:
.container {显示:弹性;对齐内容:间隔;flex-wrap: 包裹;背景:#e2eaf4;填充:10px;}.孩子 {显示:内联块;font-family: "Open Sans", Arial;字体大小:20px;颜色:#FFF;文本对齐:居中;背景:#3794fe;边框半径:6px;填充:20px;边距:12px;}.child:第一个孩子{宽度:100%;}.child:not(:first-child) {弹性:1;}
<div class="child">Child</div><div class="child">Child</div><div class="child">Child</div>
How can I set the first-child of flexbox in full-width and all of the other childs set to flex:1
(for split space)?
Like this:
解决方案
You can set the :first-child
to a width of 100%
, and the rest of the childs :not(:first-child)
to flex: 1
.
To put them on multiple lines, use flex-wrap: wrap
on the container:
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
background: #e2eaf4;
padding: 10px;
}
.child {
display: inline-block;
font-family: "Open Sans", Arial;
font-size: 20px;
color: #FFF;
text-align: center;
background: #3794fe;
border-radius: 6px;
padding: 20px;
margin: 12px;
}
.child:first-child {
width: 100%;
}
.child:not(:first-child) {
flex: 1;
}
<div class="container">
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
</div>
这篇关于Flexbox 中的第一个孩子全宽的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文