无码日韩精品无码国产_一级做a爰片久久毛片潮喷_国产欧美国日产_久久9热re这里只有国产中文精品6_每天将为您更新成人影视在线看免费观看

顯示效果:

改換成display:flex的顯示效果:

可以從效果圖看到block和flex的區(qū)別，子元素view是在換行顯示(block)還是行內顯示(flex)。

主軸和側軸

Flex布局的伸縮容器可以使用任何方向進行布局。
容器默認有兩個軸：主軸(main axis)和側軸(cross axis)。
主軸的開始位置為主軸起點(main start)，主軸的結束位置為主軸終點(main end),而主軸的長度為主軸長度(main size)。
同理側軸的起點為側軸起點(cross start),結束位置為側軸終點(cross end),長度為側軸長度(cross size)。詳情見下圖:

注意，主軸并不是一定是從左到右的，同理側軸也不一定是從上到下，主軸的方向使用flex-direction屬性控制,它有4個可選值:

• row :從左到右的水平方向為主軸

• row-reverse：從右到左的水平方向為主軸

• column:從上到下的垂直方向為主軸

• column-reverse從下到上的垂直方向為主軸

如果水平方向為主軸，那個垂直方向就是側軸，反之亦然。
四種主軸方向設置的效果圖:

圖中的實例展示了使用了不同的flex-direction值排列方向的區(qū)別。
實例代碼:

<view >

    <view class="flex-row" style="display: flex;flex-direction: row;">

        <view class="flex-view-item">1</view>

        <view class="flex-view-item">2</view>

        <view class="flex-view-item">3</view>

    </view>

    <view class="flex-column" style="display:flex;flex-direction: column;" >

        <view class="flex-view-item">c1</view>

        <view class="flex-view-item">c2</view>

        <view class="flex-view-item">c3</view>

    </view>

</view>

運行效果：

對齊方式

子元素有兩種對齊方式：

justify-conent 定義子元素在主軸上面的對齊方式
align-items 定義子元素在側軸上對齊的方式

jstify-content有5個可選的對齊方式:

• flex-start 主軸起點對齊(默認值)

• flex-end 主軸結束點對齊

• center 在主軸中居中對齊

• space-between 兩端對齊，除了兩端的子元素分別靠向兩端的容器之外，其他子元素之間的間隔都相等

• space-around 每個子元素之間的距離相等，兩端的子元素距離容器的距離也和其它子元素之間的距離相同。
  justify-content的對齊方式和主軸的方向有關，下圖以flex-direction為row，主軸方式是從左到右,描述jstify-content5個值的顯示效果:

align-items表示側軸上的對齊方式:

• stretch 填充整個容器(默認值)

• flex-start 側軸的起點對齊

• flex-end 側軸的終點對齊

• center 在側軸中居中對齊

• baseline 以子元素的第一行文字對齊

align-tiems設置的對齊方式，和側軸的方向有關，下圖以flex-direction為row,側軸方向是從上到下,描述align-items的5個值顯示效果:

有了主軸和側軸的方向再加上設置他們的對齊方式，就可以實現(xiàn)大部分的頁面布局了。

案例地址：https://github.com/jjz/weixin-mina/blob/master/pages/flex/flex.wxml