Flex布局和主要属性用法详解（一）

前言

flex布局是继标准流布局、浮动布局、定位布局后的第四种布局方式。这种方式可以非常优雅的实现子元素居中或均匀分布，甚至可以随着窗口缩放自动适应。flex布局在浏览器中存在一定的兼容性（具体参考：Flex兼容性）。但是在小程序中，是完全兼容flex布局的，并且微信官方也是推荐使用flex布局的。下面就来详细的讲下flex布局。

一个小例子

看以下代码：

<view class='outter'>
  <view class='inner'>1</view>
  <view class='inner'>2</view>
</view>

.outter{
  display: flex;
  justify-content: space-between;
  width: 300px;
  height: 200px;
  background: pink;
}
.outter .inner{
  background: gray;
  width: 100px;
  height: 100px;
}

最后的效果图：

基本概念：

1. 弹性容器：包含着弹性项目的父元素。通过设置 display 属性的值为 flex 或 inline-flex 来定义弹性容器。
2. 弹性项目(Flex item)：弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性项目。也可以称为子容器。
3. 轴(Axis)：每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。
4. 方向(Direction)：可以通过flex-direction来确定主轴和侧轴的方向。

设置在主轴上的排列方式

默认情况下，主轴的方向是从左到右。在主轴方向上，可以通过justify-content属性来设置他们的排列方式。排列方式有以下几种：

• flex-start：项目靠近父盒子的左侧。默认采用的就是这种排列方式。示例图如下：
  
• flex-end：项目靠近父盒子的右侧。
  
• center：所有项目会挨在一起在父盒子的中间位置。
  
• space-around：项目沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半。

• space-between：项目沿主轴均匀分布，位于首尾两端的子容器与父容器紧紧挨着。

• space-evenly：项目在主轴上均匀分布，首尾两端的自容器到父容器的距离跟自容器间的间距是一样的
  

设置在侧轴上的排列方式

默认情况下，侧轴的方向是从上到下。在侧轴方向上，可以通过align-items属性来设置他们的排列方式。排列方式有以下几种：

• flex-start：起始端对齐。默认就是这种对齐方式。
  

• flex-end：末尾段对齐。
  
  
• center：中间对齐。
  

• stretch：如果项目没有设置高度。那么子容器沿交叉轴方向的尺寸拉伸至与父容器一致。比如我们将.inner的高度属性去掉，代码如下：

.outter .inner{
 background: gray;
 width: 100px;
 /* height: 100px; */
 border: 1px solid #ccc;
}

• 效果图为：
  
  
• baseline：基线对齐，这里的 baseline 默认是指首行文字，所有子容器向基线对齐，交叉轴起点到元素基线距离最大的子容器将会与交叉轴起始端相切以确定基线。比如我们把代码改成如下：
  

<view class='outter'>
 <view class='inner'>
   <view style='margin-top:10px;background:#eee;'>hello</view>
 </view>
 <view class='inner'>2</view>
</view>

然后css文件为：

.outter{
 display: flex;
 align-items: baseline;
 width: 300px;
 height: 200px;
 background: pink;
}
.outter .inner{...}

那么效果图为：

更换主轴和侧轴方向

主轴默认的方向是从左到右，侧轴的方向默认是从上到下，当然也可以进行修改。可以通过flex-direction进行修改。可以修改的参数为以下：

• row：默认属性。从左到右。
  

• row-reverse：从右到左。
  
  
• column：从上到下。
  
  
• column-reverse：从下到上。
  
  

换行

默认情况下，元素个数如果超过一定数量，那么在一行当中就排列不下。此时flex默认的处理方式是压缩元素，使其能在一行中排列下来。比如以下代码：

<view class='outter'>
  <view class='inner'>1</view>
  <view class='inner'>2</view>
  <view class='inner'>3</view>
  <view class='inner'>4</view>
</view>

.outter{
  display: flex;
  width: 300px;
  height: 200px;
  background: pink;
}
.outter .inner{
  background: gray;
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
}

那么会把这四个元素挤压在一行中。即使给元素设置了宽度也没有用的。效果图如下：

可以通过flex-wrap来改变排列的方式。可以设置的属性如下：

1. nowrap：不换行。默认的。
   
   
   
2. wrap：换行。
   
   
3. wrap-reverse：换行，但是第一行会在下面。