微信小程序14__布局Flex-Direction，Flex-Wrap,Justify-Content

Flex 布局, 要深刻理解

首先看一个图

 

1. flex-direction
   代表排列方向， 决定主轴的方向,   在wxss文件中，如果这样定义
   
   flex-direction:row   // 表示从左到右排列
   
   flex-direction:row-reverse  // 表示从右到左排列
   
   flex-direction:column    //表示从上到下排列
   
   flex-direction:column-reverse   //表示从下到上排列
    
2. flex-wrap
   代表是否换行， 默认值为nowrap 表示不换行
   flex-wrap:nowrap 表示不换行
   
   flex-wrap: wrap 表示换行
   
   看效果图
   
   
   
   
   
   
   
   
   
   
    
3. flex-flow
   flex-flow 是Flex-Direction 和Flex-Wrap的集合， 第一个值是direction, 第二个值是wrap,
   
    
4. justify-content
   
   justify-content 定义在主轴上的对齐方式
   flex-start:  从左到右对齐方式
   flex-end:   从右到左对齐方式
   center:      居中对齐
   space-between:  两边对齐， 中间平均分隔
   space-around: 每个元素两边完全相等
   
   (1)看一个从左到右对齐的例子：
   flex.wxml：

   <view class="box  box-justify-content">
     <view  class="box-item">1</view>
     <view  class="box-item">2</view>
     <view  class="box-item">3</view>
   </view>

   flex.wxss

   .box-justify-content{
     justify-content: flex-start;
   }

   运行效果图：
    

   

(2)如果要实现右对齐，则样式这样写
 

.box-justify-content{
  justify-content: flex-end;
}

(3) 样式定义为space-between 的效果图
 

（4）样式定义为space-around的效果图