css的flex布局详解(学习来源慕课网小程序简历)

原創

逸羽菲

2020-05-16 11:14

前言

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

flex布局的重要性

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

flex布局的应用

先设计容器。

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

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

.containers{
  /* 加上他，变成弹性布局，将会水平排列 */
  display: flex;
  /* 控件的排列方向，默认是row，水平排列 */
  /* flex-direction: column; */

  /* 对齐方式.
  flex-start:起点对齐，
  flex-end:末尾对齐
  space-between:两端对齐
  space-around:环绕对齐
   */
  justify-content: space-between;

  /* 相对于父控件的对齐方式
    flex-start:顶端对齐
    flex-end:末端对齐
    center:居中对齐
    baseline:文字基线对齐
  */
  align-items: flex-end;
  height: 200px;
  background: pink; 
}

子div的样式如：

.div1{
  width: 50px;
  height: 50px;
  background-color: yellow;
  /* 在子控件上加入flex=1，将会平分屏幕的宽度 */
  /* flex: 1; */

  /* 该子组件将会填充剩余的宽度 */
  /* flex-grow: 1; */
}
.div2{
  width: 50px;
  height: 50px;
  background: blue;
  /* flex: 1; */
}
.div3{
  width: 50px;
  height: 50px;
  background: greenyellow;
  /* flex: 1; */
}

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

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

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