console
<div class="wrap">
<div class="item item1">
<div class="item1-1">item1 item21 item2 item21 item2</div>
</div>
<div class="item item2">item2 item2 item2</div>
<div class="item item3">item3 item3 item3</div>
</div>
.wrap {
display: flex;
justify-content: center;
}
.item1 {
border: 1px solid green;
}
.item2 {
border: 1px solid red;
}
.item3 {
border: 1px solid yellow;
}
/*
.item1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
.item2 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
.item3 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
*/
/* flex-basis: content; 依照内容宽度*/
/*
.item1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
.item2 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
.item3 {
flex-basis: content;
}
*/