前言

flex布局在布局中用的很多，可以使用在pc端，也可以在小程序中使用，甚至可以代替float浮动，学好flex布局对我们的用处很大。

flex布局的重要性

1. flex布局可以设置控件的排列方向和顺序。
2. flex布局可以设置各种各样的对齐方式。
3. flex布局可以弹性的放大和缩小

flex布局的应用

先设计容器。

<view class="containers">
<view class="div1"></view>
<view class="div2"></view>
<view class="div3"></view>
</view>

在父控件上加上display:flex,就变成了css的弹性布局。

.containers{
  
  display: flex;
  
  

  
  justify-content: space-between;

  
  align-items: flex-end;
  height: 200px;
  background: pink; 
}

子div的样式如：

.div1{
  width: 50px;
  height: 50px;
  background-color: yellow;
  
  

  
  
}
.div2{
  width: 50px;
  height: 50px;
  background: blue;
  
}
.div3{
  width: 50px;
  height: 50px;
  background: greenyellow;
  
}

当子样式中添加flex:1的时候，该资阳市将会把容器填充满，如果每个子控件都加上flex，将会平分父容器。不会受到自身div宽度的限制。
如下图为子组件都设为flex:1的情况。

如果子div没有填满屏幕的宽度，这时我们可以在子组件中设置 flex-grow: 1;来让该子组件填充满屏幕的宽度。如下图所示，为黄色的子div加上了flex-grow:1,当为多个子div设置该属性的时候，子div也会平分。

接下来设计父div，在父div上加**justify-content:**属性，会给子组件设置对齐方式。

• flex-start:起点对齐

• flex-end:末尾对齐

• space-between:两端对
  
• space-around:环绕对齐
• 

也可以设置align-items属性来设置相对于父div的高度对齐方式。

• flex-start:顶端对齐

• flex-end:末端对齐

• center:居中对齐

• baseline:文字基线对齐

文字基线对齐，是子div有文字的时候，文字在一条线上

我想陪你一起起床，陪你一起欣赏清晨的第一缕阳光照进阳台落地窗的风景。