html+css

flex布局 三个div 两个左对齐 一个右对齐

一、问题
有一个盒子flex布局，子元素有三个div，在不改变dom结构的情况下，实现前两个左对齐、第三个右对齐。

二、实现方案
在flex布局中如果某个元素的margin为auto，那么它的margin将会自动填充为剩下的空间。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
   <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>