（四）Flex 佈局教程和例子

佈局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對於那些特殊佈局很是不方便，好比，垂直居中就不容易實現。

1.flex-direction屬性

flex-direction屬性決定主軸的方向（即項目的排列方向）。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

　　

 

 

 

它可能有4個值。

• row（默認值）：主軸爲水平方向，起點在左端。
• row-reverse：主軸爲水平方向，起點在右端。
• column：主軸爲垂直方向，起點在上沿。
• column-reverse：主軸爲垂直方向，起點在下沿

2 justify-content屬性

justify-content屬性定義了項目在主軸上的對齊方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

　　

 3 align-items屬性

align-items屬性定義項目在交叉軸上如何對齊。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

它可能取5個值。具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下。

• flex-start：交叉軸的起點對齊。
• flex-end：交叉軸的終點對齊。
• center：交叉軸的中點對齊。
• baseline: 項目的第一行文字的基線對齊。
• stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

 

flex 還有好多的屬性 詳見 阮一峯

 

例子

下面以在微信中應用爲例

/* index.wxml */

<view class="menu">
  <view class="item">
    <image src="/static/girl.jpg"></image>
    <text>2015</text>
  </view>
    <view class="item">
    <image src="/static/girl.jpg"></image>
    <text>年</text>
  </view>
    <view class="item">
    <image src="/static/girl.jpg"></image>
    <text>11</text>
  </view>
    <view class="item">
    <image src="/static/girl.jpg"></image>
    <text>29</text>
  </view>
</view>

　　

/**index.wxss**/
image{
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;            圖片變圓角
}
.menu{　　　　　　　　　　　　　　　　  flex用法
　　
  display: flex;　　
  /* 在水平方向排列 */
  /* row規定主軸方向水平 */
  /* column規定主軸方向垂直 */　　　　　　　　　
  flex-direction: row;
  /* 在主軸方向如何展現 flex-start/center/space-around/space-between */
  justify-content: space-around;
}

/* 在wxml中嵌套的樣式 */
.menu .item{
  display: flex;
  flex-direction: column;
  align-items: center;
}