zoukankan      html  css  js  c++  java
  • Flex布局的属性之 flex-direction属性

    一、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;
    }

    效果如下图:

  • 相关阅读:
    冲刺进度条03
    冲刺进度条02
    冲刺进度条01
    第二阶段团队冲刺(九)
    第二阶段团队冲刺(八)
    第二阶段团队冲刺(七)
    用户体验评价
    第二阶段团队冲刺(六)
    程序员修炼之道:从小工到专家阅读笔记01
    2019春季学期进度报告(十三)
  • 原文地址:https://www.cnblogs.com/slovey/p/9243755.html
Copyright © 2011-2022 走看看