Flexbox 的第一个孩子

小开

最佳答案

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>

小开

Add width: 100%; for your first item. And flex: 1; for others.

.flex {
display: flex;
flex-wrap: wrap;
}


.flex-item:not(:first-child) {
flex: 1;
}


.flex-item:nth-child(1) {
width: 100%;
}


/* Styles just for demo */
.flex-item {
background-color: #3794fe;
margin: 10px;
color: #fff;
padding: 20px;
border-radius: 5px;
}

<div class="flex">
<div class="flex-item">
Child
</div>
<div class="flex-item">
Child
</div>
<div class="flex-item">
Child
</div>
</div>

小开

Another solution which utilises the flex-basis option (the third value when using this format flex: 1 1 100%).

MDN link for flex-basis

.flexContainer {
display: flex;
flex-wrap: wrap;
}


.item:first-child {
flex: 1 1 100%;
margin-bottom: 20px;
}


.item {
flex: 1 1 40%;
height: 50px;
background-color: red;
margin: 0 20px;
}

<div class="flexContainer">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

小开

I find this solution simple. Just set desired child item height.

    <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>