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

align-content属性

在排列中，如果有多行，那么这个属性是设置多行之间的排列方式。可以通过align-content属性来确定排列的方式。可以设置以下值。

1. flex-start：从上往下排列。示例代码如下：

.outter{
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 300px;
  height: 300px;
  background: pink;
}

1. 
2. flex-end：末尾段对齐。效果图如下：
   
   
   
3. center：中点对齐。效果图如下：
   
   
4. space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。效果图如下：
   
   
5. space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。效果图如下：
   
   
6. stretch：默认方式，如果没有给元素设置高度，那么会占满整个交叉轴。

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

1. 效果图如下：
   

元素（子容器）的相关属性

flex-basis

定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间。

.item {
    flex-basis: <length> | auto;
}

默认值：auto，即项目本来的大小, 这时候 item 的宽高取决于 width 或 height 的值。

当主轴为水平方向的时候，当设置了 flex-basis，项目的宽度设置值会失效，flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能发挥效果。

当 flex-basis 值为 0 时，是把该项目视为零尺寸的，故即使声明该尺寸为 140px，也并没有什么用。

当 flex-basis 值为 auto 时，则跟根据尺寸的设定值(假如为 100px)，则这 100px 不会纳入剩余空间。

flex-grow

设置元素是否需要扩大的比例。默认值为0，即如果存在剩余空间，也不放大。比如有以下代码：

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

css代码为：

.outter{
  display: flex;
  width: 300px;
  height: 300px;
  flex-wrap: wrap;
  background: pink;
}
.outter .inner{
  background: gray;
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.outter .inner1{
  flex-grow: 2;
}
.outter .inner2{
  flex-grow: 1;
}

效果图为：

因为两个元素分别占了2份，1份，所以第一个元素是占据了整个容器宽度的2/3，第二个元素占据了整个容器宽度的1/3。

另外，如果设置flex-grow为0，那么他的宽度将会保持为设置的宽度，如果宽度没有设置，那么将根据他的子元素来保留宽度。假如代码为：

  1
  2

css代码为：

.outter .inner1{
  flex-grow: 0;
}
.outter .inner2{
  flex-grow: 1;
}

效果图为：

如果把inner1的width删掉，那么效果图为：

flex-shrink属性

定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。比如有以下代码：

  1
  2
  3
  4

css的代码如下：

.outter{
  display: flex;
  width: 300px;
  height: 300px;
  background: pink;
}
.outter .inner{
  background: gray;
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.outter .inner2{
  flex-shrink: 0;
}

效果图为：

因为给inner2设置了flex-shrink为0，所以即使在空间不够的情况下，他也不会被压缩。

flex属性

flex属性是flex-grow flex-shrink flex-basis三个属性的简写。假设以上三个属性同样取默认值，则 flex的默认值是0 1 auto。

关于flex的取值，有以下几种方式：

1. auto：等价于1 1 auto。也就是允许增长，允许缩小，宽度为自动。
   
2. none：等价于0 0 auto。也就是不允许增长，不允许缩小，宽度为自动。
   
3. 非负数字：这个数字表示的是flex-grow的值，flex-shrink为1，表示允许缩小，flex-basis为0%。可以认为他就是把剩余的空间进行填充。比如以下代码是等价的：

  .item {flex: 1;}
  .item {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 0%;
  }

1. 0：对应的三个值分别为0 1 0%。比如以下代码是等价的：

.item {flex: 0;}
.item {
   flex-grow: 0;
   flex-shrink: 1;
   flex-basis: 0%;
}

1. 长度或者百分比：则这个值视为flex-basis的值，而flex-grow为1，flex-shrink为1。比如以下代码是等价的：

.item-1 {flex: 0%;}
.item-1 {
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 0%;
}
.item-2 {flex: 24px;}
.item-2 {
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 24px;
}

1. 两个非负数字：分别视为flex-grow和flex-shrink的值，flex-basis取0%，如下是等同的：

.item {flex: 2 3;}
.item {
   flex-grow: 2;
   flex-shrink: 3;
   flex-basis: 0%;
}

1. 一个非负数字和一个长度或百分比：则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1，如下是等同的：

.item {flex: 11 32px;}
.item {
   flex-grow: 11;
   flex-shrink: 1;
   flex-basis: 32px;
}

更多关于flex布局请参考：

1. CSS 弹性盒子布局 - CSS（层叠样式表） | MDN
2. 30 分钟学会 Flex 布局 - 知乎