如何用弹性框收缩包装 div?

Question

使用弹性框收缩包装div的最佳方法是什么？ 在下面的代码段中，我有一个包装器(绿色边框(收缩包装内容(红色和蓝色框(，但底部除外。

我怎样才能完成此操作？

这是一个 plunker 演示： https://plnkr.co/edit/u89JPIbZObTYIfRejlO1?p=preview

.red {
width: 100px;
height: 50px;
background-color: red;
}
.blue {
width: 100px;
height: 50px;
background-color: blue;
}
.container2 {
width: 400px;
height: 300px;
border: solid;
display: flex;
justify-content: center;
}
.wrapper2 {
border: solid green;
padding: 5px;
}

<div class="container2">
<div class="wrapper2">
<div class="red">x</div>
<div class="blue">x</div>
</div>
</div>

Answer 1

您可以使用：

• align-items

.container2 {
width: 400px;
height: 300px;
border: solid;
display: flex;
justify-content: center;
align-items:flex-start;/* update here */
}

.red {
width: 100px;
height: 50px;
background-color: red;
}
.blue {
width: 100px;
height: 50px;
background-color: blue;
}
.container2 {
width: 400px;
height: 300px;
border: solid;
display: flex;
justify-content: center;
align-items:flex-start;
}
.wrapper2 {
border: solid green;
padding: 5px;
/*margin:0 auto auto*/
}

<div class="container2">
<div class="wrapper2">
<div class="red">x</div>
<div class="blue">x</div>
</div>
</div>

• 或margin

.wrapper2 {
border: solid green;
padding: 5px;
margin:0 auto auto/* update here */
}

.red {
width: 100px;
height: 50px;
background-color: red;
}
.blue {
width: 100px;
height: 50px;
background-color: blue;
}
.container2 {
width: 400px;
height: 300px;
border: solid;
display: flex;
justify-content: center;
/* align-items:flex-start;*/
}
.wrapper2 {
border: solid green;
padding: 5px;
margin:0 auto auto
}

<div class="container2">
<div class="wrapper2">
<div class="red">x</div>
<div class="blue">x</div>
</div>
</div>

提醒/定性：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

在 上使用align-items: flex-start;属性.container2

.red {
width: 100px;
height: 50px;
background-color: red;
}
.blue {
width: 100px;
height: 50px;
background-color: blue;
}
.container2 {
width: 400px;
height: 300px;
border: solid;
display: flex;
justify-content: center;
align-items: flex-start;
}
.wrapper2 {
border: solid green;
padding: 5px;
}

<div class="container2">
<div class="wrapper2">
<div class="red">x</div>
<div class="blue">x</div>
</div>
</div>