Flex布局

flex布局的特点：

1. 与方向无关。
2. flex布局可以实现空间自动分配，自动对齐。
3. 适用于简单的线性布局。

示例

  <div class="container">
    <div class="inner"></div>
    <div class="inner"></div>
  </div>

.container{
  width: 200px;
  border: 1px solid red;
  display: flex;
}
.inner{
  width: 40px;
  height:40px ;
  border: 1px solid green;  
}

在父元素上添加属性display: flex后本来两个该纵向排列的div会挤到一行。如果多个元素的宽度和大于父元素的宽度则子元素的宽度会被挤压。

flex-container属性

1. flex-direction -- 元素排列方向
   • row ---- 按行排列
   • row-reverse ---- 倒序按行排列，占不满宽度时集体向右靠。
   • column ---- 按列排序
   • column-reverse ---- 倒序按列排序，占不满宽度时集体向右靠。
2. felx-wrap
   • wrap ---- 按行排列时如果当前父元素宽度不够子元素的宽度和，则换行。按列排序时则新增一列。
   • nowrap ---- 不换行。
   • wrap-reverse ---- 正常换行，但是应该放在底下的元素会跑到上面。如图所示：

3. flex-flow
   • 第一个值取flex-direction的值，第二个值取flex-wrap的值。
4. justify-content 主轴 对齐方式
   • center ---- 主轴方向上居中。
   • space-between ---- 剩余空间被平分，左右两边的元素和“边框”无边距。

     

   • space-around ---- 剩余空间被平分，子元素主轴方向上两边空间相等。

     

   • flex-start ---- 向主轴起点靠拢，主轴方向上不留空隙。
   • felx-end ---- 向主轴终点靠拢，主轴方向上不留空隙。
5. align-items 侧轴 对齐方式
   • baseline
   • strech ---- 将所有元素在侧轴方向上拉抻到最高元素的高度，是默认值。
   • center ---- 侧轴方向居中。
   • flex-end ---- 向侧轴终点靠拢。
   • flex-start ---- 向侧轴起点靠拢。
6. align-content 多行多列对齐方式
   • center ---- 按行排列时垂直居中：

     

     按列排序时水平居中：

     

   • flex-end ---- 向侧轴终点靠拢
   • flex-start ---- 向侧轴起点靠拢
     ......

flex item的属性

1. flex-grow: 设置一个数值，如果只有一个元素设置此属性，那么主轴上的剩余长度会被其占满。如果多个元素设置了flex-grow，那么会按照数值比例来分配主轴空间（未设置的元素不变）。
2. flex-shrink: 空间不够时的收缩比例。
3. flex-basis: 设置默认大小。
4. flex: 是上面三个属性的简写。
5. order: 改变主轴上的元素排列顺序。
6. align-self:
   • center ---- 侧轴居中对齐
   • flex-end ---- 向侧轴终点靠拢
   • flex-start ---- 向侧轴起点靠拢