flex

特性

• flex 内的子元素都相当于行内块元素，span 原本非块级元素，即不可设置宽高，但是当处于 flex 容器内时设置了宽高就有效
• flex 布局内的子元素的属性：float,clear,vertical-align 属性将失效

属性介绍

父元素属性

• flex-direction：设置主轴的方向。默认主轴是水平从左到右的方向

  • row：子元素水平排列，默认值从左到右
  • row-reverse：从右到左
  • column：子元素垂直排列，默认从上到下
  • column-reverse：从下到上

• justify-content

  • flex-start - 默认从主轴的头部开始，如果主轴是X轴，则从左到右
  • flex-end - 从主轴的尾部开始
  • center - 在主轴居中对齐
  • space-around - 评分剩余空间
  • space-between - 首尾元素分别在父元素首尾，中间元素平分剩余的中间空间

• align-items：垂直方向的对齐方式：flex-start,flex-end,center,stretch（不要设置子元素的高度，flex会使子元素的高度充满父元素）

• align-content：设置侧轴的排列方式，只在多行的情况下有效（align-items 是针对单行）。有下面多个枚举：

  • flex-start - 从侧轴的头部开始（默认）
  • flex-end - 从侧轴的尾部开始
  • center - 在侧轴的中间显示
  • space-around - 子元素在侧轴平分所有空间，类似主轴的属性 justify-content = space-around
  • space-between - 子元素在侧轴先分布在两头，剩余的空间再评分给剩余的子元素，类似主轴的 justify-content = space-between
  • stretch - 设置子元素高度平分父元素的高度
  • 注意此属性要配合属性 flex-wrap，单行居中使用 align-items 多行使用 align-content

• flex：控制内部子元素的宽度，1表示子元素在水平方向上平均分配

• flex-wrap：两个选项：nowrap,wrap。默认前者，表示一行装不下子元素的话会自动缩小子元素的宽度直至能显示的下。后者表示保持子元素原本的宽度， 如果一行显示不下，则另起一行。

• align-items：水平方向对齐方式

• flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap 。例如

  div {
      flex-direction: column;
      flex-wrap: wrap;
      /* 上面两个属性相当于下面一行 */
      flex-flow: column wrap;
  }
  

子元素属性

• flex - 子元素占用的份数
• align-self - 控制子元素自己在侧轴的排列方式
• order - 属性定义子元素的排列顺序（前后顺序）
• align-self - 单独设置本子元素在侧轴上的排列方式
• order - 子元素的排列顺序，数字越小越是靠前

案例

主轴子元素排列方式

圣杯布局

错误与提示

父容器设置flex子元素消失

为子元素设置最小宽度

  min-width: 400px;
  flex-shrink: 0;