flex布局

Posted on 2019-02-15 15:11  猫头唔食鱼  阅读(371)  评论(0)  编辑  收藏  举报

flex布局的两个概念

flex container 和 flex items

flex container 设置 display:flex

flex items 设置 flex:1

 

flex 布局排列方向：

默认:

/* flex-direction的值的改变，会改变元素排列方式和对齐方式 */

 flex-direction:row;  // 默认排序方式，文字左对齐
flex-direction:row-reverse    //水平从右向左排列，文字右对齐
flex-direction:column；   // 垂直顺序排序，文字上对齐
flex-direction:column-reverse；    // 垂直反向排列，文字下对齐

 

justify-content可以设置items的分布方式：

可取的值有：

jusitify-content:center        //中间分布,之间没有空位

 

 

justify-content:space-around;   中间分布，直接有相同大小的空隙

 



justify-content:space-between; //向两边平均分布




 


 


 


 


 




 


 




justify-content:flex-end;      // 如果flex-direction是row，那么就靠右，如果flex-direction:row-reverse,那么就靠左






 


 






justify-content:flex-start; // 如果flex-direction是row,靠左，如果flex-direction是row-reverse,靠右






 


flex布局可以使用在微信小程序中：


例如：


<view></view>在小程序里相当于div


wxml文件




<view class='box yellow'>1</view>
  <view class='box orange'>2</view>
  <view class='box red'>3</view>




wcss




 .container{
   display: flex;
   flex-direction:column-reverse;
 }

 .box{
   width: 100px;
   height: 100px;
  
 }

 .red{
   background-color: red;
    flex: 1;
 }

  .yellow{
   background-color: yellow;
   flex: 1;
 }

   .orange{
   background-color: orange;
   flex: 1;
 }




 


效果如下