2024-06-07

1,设置 display:flex 后 flex布局设置单个子元素靠右

比如有三个元素：

<div>
　　<div></div>
　　<div></div>
　　<div></div>
</div>

最外层的设置display:flex，水平排列，子元素前两个靠左，第三个靠右
有两种方式实现，第三个元素设置

// 方法一
margin-left: auto;
// 方法二
flex: 1;
text-align:right

2,设置 display:flex 后 所有元素右对齐

<div class="container">
  <div class="item">Flex 1</div>
  <div class="item">Flex 2</div>
</div>
.container {
  display: flex;
  flex-direction: row;     // 来指定主轴为水平方向。
  justify-content: flex-end;
}
.item {
  background-color: grey;
  color: white;
  padding: 10px;
  margin: 10px;
}