#css# flex布局小技巧之让某个子元素靠右或靠左显示

以下以块元素的Flex布局为示例：
只需要两句代码，轻松搞定！

代码1：
在父元素里面加入以下代码：
（父盒子加了display: flex，就相当于起到浮动的效果，盒子会自行排列成一排）

display: flex

代码2：
在需要移动的子元素里（此处为靠右显示），加入以下代码：

margin-left: auto

**子元素居右显示
示例如下：

【 html版块示例 】：

 
<!--我是父盒子-->
<div class="father_box">
<!--三个子盒子-->
  <div class="son_box1">普通盒子甲</div>
  <div class="son_box2">普通盒子乙</div>
  <div class="son_box3">靠右显示盒子</div>
</div>

【 css版块示例】

  .father_box {
     margin: 100px auto;
     width: 300px;
     height: 200px;
     background-color: rebeccapurple;
     display: flex; 
   }
   .son_box1 {
     width: 80px;
     height: 80px;
     background-color: cornflowerblue;
   }
    .son_box2 {
     width: 80px;
     height: 80px;
     background-color: pink;
   }
   .son_box3 {
     width: 100px;
     height: 100px;
     background-color: blue;
     color: #ff9d00;
     margin-left: auto;
   }
   

网页显示效果：

子元素居左显示
示例如下：

【 html版块示例 】：

 
<!--我是父盒子-->
<div class="father_box">
<!--三个子盒子-->
  <div class="son_box1">靠左显示盒子</div>
  <div class="son_box2">盒子甲</div>
  <div class="son_box3">盒子乙</div>
</div>

【 css版块示例】

  .father_box {
    margin: 100px auto;
     width: 300px;
     height: 200px;
     background-color: rebeccapurple;
     display: flex; 
   
   .son_box1 {
     width: 100px;
     height: 100px;
     background-color: mediumspringgreen;
     margin-right: auto;
   }
    .son_box2 {
     width: 80px;
     height: 80px;
     background-color: saddlebrown;
   }
   .son_box3 {
     width: 80px;
     height: 80px;
     background-color: blue;
     color: #ff9d00;
   }
   

网页显示效果：

小结：

• 父盒子加了display: flex，就相当于起到浮动的效果，盒子会自行排列成一排；

• 若想让父盒子里的某一个盒子靠右显示，其他盒子居左， 只需要在父盒子里面，
  加入display: flex，在想要移动的盒子里面，加入margin-left: auto即可；

• 同理，如果你想让第一个盒子向左显示，其余盒子都向右显示，只需要给左边的第一个盒子设置 margin-right:auto即可；

• 此外，行内元素也可以使用Flex布局，子元素的代码如下：

.box{ display:inline-flex;}

以上，完毕。