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:**屬性，會給子組件設置對齊方式。