关于CSS中的Flex布局

概念

Flex是一种布局手段，也称为弹性盒。它的特点如下：

• 可以替代浮动来完成页面布局。
• flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变

弹性容器

要使用弹性盒，必须先将一个元素设置为弹性容器

/* 设置块级弹性容器 */
display: flex;
/* 设置为行内弹性容器 */
display: inline-flex;

弹性容器的轴

• 主轴
  • 弹性元素的排列方向称为主轴
• 侧轴
  • 与主轴垂直的方向称为侧轴

弹性容器的常用属性

• flex-direction
  • 用来指定容器中弹性元素的排列方式
  • 可选值
    • row：默认值，弹性元素在容器中水平排列（类似向左浮动）
      • 主轴自左向右
    • row-reverse：弹性元素在容器中反向水平排列（类似向右浮动）
      • 主轴自右向左
    • column：弹性元素在容器中纵向排列
      • 主轴自上向下
    • column-reverse：弹性元素在容器中反向纵向排列
      • 主轴自下向上
• flex-wrap
  • 设置弹性元素是否在弹性容器中自动换行
  • 可选值
    • nowrap：默认值
    • wrap
    • wrap-reverse：元素沿着辅轴反向换行
• flex-flow
  • flex-direction和flex-wrap的简写属性
• justify-content
  • 如何分配主轴上的空白空间（主轴上的元素如何排列）
  • 可选值
    • flex-start：元素沿着主轴起边排列
    • flex-end：元素沿着主轴终边排列
    • center：元素居中排列
    • space-around：空白分布到元素两侧
    • space-between：空白均匀分布到元素中间
    • space-evenly：空白分布到元素的单侧（兼容性不是特别好，慎用）
• align-items
  • 元素在辅轴上如何对齐
  • 设置的是元素间的关系
  • 可选值
    • stretch：默认值，将元素的长度设置为相同的值
    • flex-start：元素不会拉伸，沿着辅轴起边对齐
    • flex-end：元素不会拉伸，沿着辅轴终边对齐
    • center：元素不会拉伸，沿着辅轴居中对齐
    • baseline：基线对齐
• align-content
  • 辅轴空白空间的分布
  • 可选值与justify-content一样

弹性元素

弹性容器的直接子元素是弹性元素（弹性项）

弹性元素的常用属性

• align-self

  • 用来指定自己在父元素中沿辅轴方向的位置
  • 可以覆盖弹性容器中的align-items的值

• flex-grow

  • 指定弹性元素伸展的系数，默认值0
  • 当父元素有多余的空间时，子元素如何伸展
  • 父元素的剩余空间，会按照比例进行分配

• flex-shrink

  • 指定弹性元素的收缩系数
  • 当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩

• flex-basis

  • 元素的基础长度
  • 指定的是元素在主轴上的基础长度
    • 如果主轴是横向的，则该值指定的是元素的宽度
    • 如果主轴是纵向的，则该值指定的是元素的高度
  • 默认值是auto，表示参考元素自身的宽度或高度
    • 如果传递了一个具体的数值，则以该值为准

• flex

  • flex-grow，flex-shrink，flex-basis的简写属性
  • 可选值
    • initial
      • 相当于flex 0 1 auto
    • auto
      • 相当于flex: 1 1 auto
    • none
      • flex:0 0 auto

• order

  • 决定弹性元素的排列顺序