<分区>
<分区>
我试图每行显示 4 个框。 box1 box2 box3 box4。我只使用 flexbox 方法。下面是我正在使用的 HTML 和 CSS 代码。
.parent {
display: flex;
flex-wrap: wrap;
}
.parent>.child {
flex: 1 0 21%;
}<div class="parent">
<div class="child box1">A Child</div>
<div class="child">
<div class="box2">B Child 1</div>
<div class="box3">B Child 2</div>
<div class="box4">B Child 3</div>
<div class="box5">B Child 4</div>
<div class="box6">B Child 5</div>
<div class="box7">B Child 6</div>
</div>
<div class="child box8"></div>
</div>但是div1和div8没有定位。
最佳答案
这里是调整每行的 div 子元素的宽度的方法:
You need to select each
divand the result will be based on the average of all theflex-growproperty numbers you set.
请注意属性 flex: 是 flex-grow, flex-基础 和 flex-shrink。
您可以在 css-tricks.com 上阅读有关使用 CSS 的 Flexbox 的更多信息
.container {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-around;
background-color: lightgray;
text-align: center;
}
.row>div:nth-child(1) {
border: 1px solid black;
flex: 1;
margin: 2px;
}
.row>div:nth-child(2) {
border: 1px solid black;
flex: 2;
margin: 2px;
}
.row>div:nth-child(3) {
border: 1px solid black;
flex: 1;
margin: 2px;
}
.row>div:nth-child(4) {
border: 1px solid black;
flex: 3;
margin: 2px;
}<div class="container">
<div class="row">
<div>some text</div>
<div>some text</div>
<div>some text</div>
<div>some text</div>
</div>
<div class="row">
<div>some text</div>
<div>some text</div>
<div>some text</div>
<div>some text</div>
</div>
</div>关于html - 如何在 flexbox 布局中每行显示 4 个 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59037976/