.main{
display:flex;
border: 1px solid black;
}
.item, .item2, .item3, .item4{
padding: 10px;
}
.item {
flex-grow: 1;
flex-wrap: wrap;
}
.item2{
flex-grow: 7;
background-color: pink;
}
.item3 {
flex-grow: 2;
background-color: yellow;
}
<div class="main">
<div class="item">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
</div>
在上述情况下,如何将项目4移至新行?我看过的所有示例,都有可能具有相同的宽度。
答案 0 :(得分:1)
使用.item-group
来按行组织.item
。示例:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.main {
display: flex;
border: 1px solid black;
flex-wrap: wrap;
}
.item-group {
flex-basis: 100%;
display: flex;
}
.item1, .item2, .item3, .item4 {
padding: 10px;
}
.item1 {
flex-grow: 1;
}
.item2{
flex-grow: 7;
background-color: pink;
}
.item3 {
flex-grow: 2;
background-color: yellow;
}
.item4 {
background-color: violet;
}
<div class="main">
<div class="item-group">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>
<div class="item-group">
<div class="item4">4</div>
</div>
</div>
答案 1 :(得分:1)
您需要激活父元素(flex容器)上的环绕,然后使元素变为全宽:
.main{
display:flex;
border: 1px solid black;
flex-wrap:wrap;
}
.item, .item2, .item3, .item4{
padding: 10px;
}
.item {
flex-grow: 1;
}
.item2{
flex-grow: 7;
background-color: pink;
}
.item3 {
flex-grow: 2;
background-color: yellow;
}
.item4 {
flex-basis:100%;
}
<div class="main">
<div class="item">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
</div>