仅更改某些弹性项目的弹性方向

Question

在不更改html结构的情况下，是否可以在同一行(行方向(显示最后2个div

.wrapper {
display: flex;
flex-direction: column;
}

<div class="wrapper">
<div class="elt1">elt1</div>
<div class="elt2">elt2</div>
<div class="elt3">elt3</div>
<div class="elt4">elt4 to be in row</div>
<div class="elt5">elt5 to be in row</div>
</div>

Answer 1

是，如果您在子级上使用flex-wrap: wrap;和默认flex-direction: row加上100%/50%width设置，如下所示：

(编辑：按照评论中的要求对内容进行附加居中(

.wrapper {
display :flex;
flex-wrap: wrap; 
}
.wrapper > * {
width: 100%;
border: 1px dotted #ccc;
box-sizing: border-box;
display: flex;
justify-content: center;
}
.wrapper > *:last-child,
.wrapper > *:nth-last-child(2) {
width: 50%;
}

<div class="wrapper">
<div class="elt1">elt1</div>
<div class="elt2">elt2</div>
<div class="elt3">elt3</div>
<div class="elt4">elt4 to be in row</div>
<div class="elt5">elt5 to be in row</div>
</div>