Câu trả lời được chấp nhận bởi Adam ( flex: 1 1 0) hoạt động hoàn hảo cho các thùng chứa flexbox có chiều rộng cố định hoặc được xác định bởi tổ tiên. Các tình huống mà bạn muốn trẻ em phù hợp với container.
Tuy nhiên, bạn có thể có một tình huống mà bạn muốn hộp đựng phù hợp với trẻ em, với những đứa trẻ có kích thước tương đương dựa trên đứa trẻ lớn nhất. Bạn có thể làm cho một hộp chứa flexbox phù hợp với trẻ em của nó bằng cách:
- thiết lập
position: absolutevà không thiết lập widthhoặc right, hoặc
- đặt nó bên trong một bọc
display: inline-block
Đối với các hộp đựng flexbox như vậy, câu trả lời được chấp nhận KHÔNG hoạt động, trẻ em không có kích thước bằng nhau. Tôi cho rằng đây là một hạn chế của flexbox, vì nó hoạt động giống nhau trong Chrome, Firefox và Safari.
Giải pháp là sử dụng lưới thay vì flexbox.
Bản trình diễn: https://codepen.io/brettdonald/pen/oRpORG
<p>Normal scenario — flexbox where the children adjust to fit the container — and the children are made equal size by setting {flex: 1 1 0}</p>
<div id="div0">
<div>
Flexbox
</div>
<div>
Width determined by viewport
</div>
<div>
All child elements are equal size with {flex: 1 1 0}
</div>
</div>
<p>Now we want to have the container fit the children, but still have the children all equally sized, based on the largest child. We can see that {flex: 1 1 0} has no effect.</p>
<div class="wrap-inline-block">
<div id="div1">
<div>
Flexbox
</div>
<div>
Inside inline-block
</div>
<div>
We want all children to be the size of this text
</div>
</div>
</div>
<div id="div2">
<div>
Flexbox
</div>
<div>
Absolutely positioned
</div>
<div>
We want all children to be the size of this text
</div>
</div>
<br><br><br><br><br><br>
<p>So let's try a grid instead. Aha! That's what we want!</p>
<div class="wrap-inline-block">
<div id="div3">
<div>
Grid
</div>
<div>
Inside inline-block
</div>
<div>
We want all children to be the size of this text
</div>
</div>
</div>
<div id="div4">
<div>
Grid
</div>
<div>
Absolutely positioned
</div>
<div>
We want all children to be the size of this text
</div>
</div>
body {
margin: 1em;
}
.wrap-inline-block {
display: inline-block;
}
#div0, #div1, #div2, #div3, #div4 {
border: 1px solid #888;
padding: 0.5em;
text-align: center;
white-space: nowrap;
}
#div2, #div4 {
position: absolute;
left: 1em;
}
#div0>*, #div1>*, #div2>*, #div3>*, #div4>* {
margin: 0.5em;
color: white;
background-color: navy;
padding: 0.5em;
}
#div0, #div1, #div2 {
display: flex;
}
#div0>*, #div1>*, #div2>* {
flex: 1 1 0;
}
#div0 {
margin-bottom: 1em;
}
#div2 {
top: 15.5em;
}
#div3, #div4 {
display: grid;
grid-template-columns: repeat(3,1fr);
}
#div4 {
top: 28.5em;
}
flexbất động sản là một tài sản viết tắt choflex-grow,flex-shrinkvàflex-basistài sản. Bạn nên sử dụng tốc ký trên các thuộc tính riêng lẻ vì tốc ký đặt lại chính xác mọi thành phần không xác định để phù hợp với việc sử dụng chung. Giá trị ban đầu là0 1 auto.