一、问题
有一个盒子flex布局,子元素有 三个div,在不改变dom结构的情况下,实现 前两个左对齐 第三个右对齐。
二、实现方案
在flex布局中如果某个元素的margin为auto,那么它的margin将会自动填充为 剩下的空间。
<div class="box">
<div class="block">
</div>
<div class="block">
</div>
<div class="block" style="margin-left: auto;">
</div>
</div>
<style>
.box {
display: flex;
justify-content: flex-start;
}
.block {
width: 100px;
height: 100px;
background-color: black;
}
</style>