Flex佈局的屬性之 flex-direction屬性

1、flex-direction 屬性 

　flex-direction屬性控制主軸的方向，即項目的排列方向。

　格式： .class {

　　　　　　flex-direction: row | row-reverse | column | column-reverse;

　　　　}

　flex-direction屬性有4個值：

值	說明
row	默認值是row，主軸爲水平方向，從左到右排列
row-reverse	主軸爲水平方向，從右到左排列
column	主軸爲垂直方向，從上到下排列
column-reverse	主軸爲垂直方向，從下到上排列

 

 

 

 

例： flex-direction.wxhml 和 flex-direction.wxss

<view class="row">
  <view class='item'>1</view>
  <view class='item'>2</view>
  <view class='item'>3</view>
  <view class='item'>4</view>
</view>

<!--flex-direction: row-reverse  -->
<view class='row-reverse'>
  <view class='item'>1</view>
  <view class='item'>2</view>
  <view class='item'>3</view>
  <view class='item'>4</view>
</view>

<!--flex-direction: column  -->
<view class='column'>
  <view class='item'>1</view>
  <view class='item'>2</view>
  <view class='item'>3</view>
  <view class='item'>4</view>
</view>

<!--flex-direction: column-reverse  -->
<view class='column-reverse'>
  <view class='item'>1</view>
  <view class='item'>2</view>
  <view class='item'>3</view>
  <view class='item'>4</view>
</view>

.row { display:flex; flex-direction: row; } .row-reverse { display: flex; flex-direction: row-reverse; } .column { display: flex; flex-direction: column; } .column-reverse { display: flex; flex-direction: column-reverse; } .item { padding: 1em; margin: 0.5em; background-color: #CCC; }

效果以下圖：