使用弹性框连续显示 4 个 div

Question

我正在尝试使用以下 html 在一行中显示 4 个框。所以一行应该有 4 个框。我总共有 8 个框，将有 2 行 4 列。

<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">C Child</div>
</div>

它应该是这样的

A-Child   Child1   Child2    Child3
Child4    Child5   Child6    C-Child

我尝试的 css 是

.parent {
display: flex;
flex-wrap: wrap;
}

.parent>.child {
flex: 1 1 20%;
}
.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8 {
height:100px;
width:100px;
border:10px solid red;
}

Answer 1

这可以通过display:contents但目前对该属性值的支持很差或有问题。

.parent {
display: flex;
flex-wrap: wrap;
}
.open {
display: contents;
}
.box {
height: 100px;
width: 25%;
border: 3px solid red;
box-sizing: border-box;
}

<div class="parent">
<div class="child box">A Child</div>
<div class="child open">
<div class="box">B Child 1</div>
<div class="box">B Child 2</div>
<div class="box">B Child 3</div>
<div class="box">B Child 4</div>
<div class="box">B Child 5</div>
<div class="box">B Child 6</div>
</div>
<div class="child box">C Child</div>
</div>

Answer 2

你可以用一些浮点数来做到这一点(是的，浮点数！

.box {
height:100px;
width:25%;
border:3px solid red;
box-sizing:border-box;
float:left;
}
.parent {
overflow:hidden; /* Clear float */
}

<div class="parent">
<div class="child box">A Child</div>
<div class="child">
<div class="box">B Child 1</div>
<div class="box">B Child 2</div>
<div class="box">B Child 3</div>
<div class="box">B Child 4</div>
<div class="box">B Child 5</div>
<div class="box">B Child 6</div>
</div>
<div class="child box">C Child</div>
</div>

使用弹性框，您可以像下面这样近似：

.parent {
display:flex;
flex-wrap:wrap;
}
.parent > .box,
.child >.box {
height:100px;
width:25%;
border:3px solid red;
box-sizing:border-box;
}
.child:nth-child(2) {
width:100%;
display:flex;
flex-wrap:wrap;
margin:-100px 0; /* same value as height here */
}
.child:nth-child(2):before {
content:"";
width:25%;
}
.child:last-child {
margin-left:auto;
}

<div class="parent">
<div class="child box">A Child</div>
<div class="child">
<div class="box">B Child 1</div>
<div class="box">B Child 2</div>
<div class="box">B Child 3</div>
<div class="box">B Child 4</div>
<div class="box">B Child 5</div>
<div class="box">B Child 6</div>
</div>
<div class="child box">C Child</div>
</div>

Answer 3

如果您希望它们都基于单个父级进行排序，则需要让它们都成为父级的子项。 下面是如何实现您正在寻找的目标的示例。

.parent {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.box {
height: 100px;
width: 25%;
border: 10px solid red;
box-sizing: border-box;
}

<div class="parent">
<div class="box">A Child</div>
<div class="box">B Child 1</div>
<div class="box">B Child 2</div>
<div class="box">B Child 3</div>
<div class="box">B Child 4</div>
<div class="box">B Child 5</div>
<div class="box">B Child 6</div>
<div class="box">C Child</div>
</div>