Flex Box 概念梳理

Flex Box

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。

之所以说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局CSS Grid Layout，可以同时处理行和列上的布局。

采用 Flex 布局的元素，称为 Flex 容器（flex container），容器里的子元素称为项目（item）。

1.容器

• 概念

从容器的角度来看，有两个不变的轴，主轴由 flex-direction 定义，另一根轴垂直于它。默认定义是：

​ 1) 从左往右的主轴 （main axis），主轴开始位置称为 main start ，结束位置称为 main end

​ 2) 从上到下的交叉轴 （cross axis），交叉轴开始位置称为 cross start ，结束位置称为 cross end

• 相关属性

  • flex-direction：定义了主轴方向。决定容器内项目排列方向，默认从左到右 row 。 column 表示容器内项目沿着主轴排列， reverse 表示沿着交叉轴排列。

        flex-direction：row | row-reverse | column | column-reverse

特别注意：flex-direction设置后会引起项目排列方向改变。

• flex-wrap：决定容器主轴方向上项目是否换行，默认不换行 nowrap 。 reverse 表示反向。

    flex-wrap: nowrap | wrap | wrap-reverse;

• flex-flow：是 flex-direction 和 flex-wrap 属性的简写。默认为： row nowrap 。

    flex-flow: <flex-direction> || <flex-wrap>;

• justify-content：决定容器内项目 在主轴上 对齐方式。默认左对齐 flex-start 。

    justify-content: flex-start | flex-end | center | space-between | space-around;
    /**
    * flex-start（默认值）：左对齐。项目堆放在容器主轴开始位置(main start)；
    * flex-end：右对齐。项目堆放在容器主轴结束位置(main end)；
    * center： 居中。项目沿着主轴居中排列；
    * space-between：两端对齐，项目之间的间隔都相等。
    * space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
    **/

• align-items：决定容器内项目 在交叉轴上 对齐方式。默认为 stretch 。

    align-items: flex-start | flex-end | center | baseline | stretch;
    /**
    * flex-start：交叉轴的起点对齐。
    * flex-end：交叉轴的终点对齐。
    * center：交叉轴的中点对齐。
    * baseline: 项目的第一行文字的基线对齐。
    * stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
    **/

• align-content：决定容器内项目 在交叉轴上 内容与剩余空间对齐方式。默认为 stretch 。

  特别注意：该属性只对设置了flex-wrap:wrap的容器生效，并且容器里的元素构成了多行。

    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    /**
    * flex-start：与交叉轴的起点对齐。
    * flex-end：与交叉轴的终点对齐。
    * center：与交叉轴的中点对齐。
    * space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
    * space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
    * stretch（默认值）：轴线占满整个交叉轴。
    **/

2.项目

• 概念

  项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size ，占据的交叉轴空间叫做 cross size 。

• 相关属性

  • order：定义项目在容器 主轴方向上的 排列顺序，数值越小排列越靠前。默认为 0 。

        order: <integer>;

• flex-grow：定义项目的放大比例，默认为 0 ，即便容器存在剩余空间，也不放大。不允许负值。

    flex-grow: <number>; /* default 0 */
    /**
    * 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
    * 如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
    **/

• flex-shrink：定义项目在容器空间不足时的缩小比例，默认为1，即容器空间不足时该项目要缩小，并且项目内容会换行。不允许负值。

    flex-shrink: <number>; /* default 1 */
    /**
    * 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
    * 如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
    **/

• flex-basis：可以理解成设置项目默认大小。定义项目分配多余空间之前， 在主轴上 占据的空间。默认为auto，即项目内容大小。

    flex-basis: <length> | auto; /* default auto */

如果容器内所有项目大小总和超过容器，不设置 wrap 的情况下会溢出容器：

• flex：是 flex-grow , flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选。

    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

• align-self：用于设置单个项目 在交叉轴上 对齐方式，可覆盖容器的 align-items 属性，默认为 auto 。如果值为 auto ，则计算值为父元素的 'align-items ' 值，否则为指定值。

    align-self: auto | flex-start | flex-end | center | baseline | stretch;