<div class="list">
<div class="list-item item1">1</div>
<div class="list-item item2">2</div>
<div class="list-item item3">3</div>
</div>
1、flex布局:
.list {
display: flex;
justify-content: space-between;
width: 100%;
}
.list-item {
background-color: skyblue;
border: 1px solid blue;
height: 100px;
}
.item1 {
flex: 1;
}
.item2 {
flex: none;
width: 500px;
}
.item3 {
flex: 1;
}
2、grid布局:
.list {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
grid-template-columns: auto 500px auto;
}