flexible box layout

Posted 2020-10-06

flexible box 的简介：

            flexbox 是 2009 年 W3C 提出的一种全新的可伸缩的 CSS 布局方式。依赖 flexbox，我们可以更简单，高效的完成可伸缩式页面的布局。flexbox 一共经历了三个版本，分别为 old，tweener，new，这三种版本下的 display 属性值不一样，分别为 "display: box"，"display: flexbox"，"display: flex"。flexbox 中有两个非常重要的概念：flex container（flex 容器） 和 flex item（flex 项目），当我们给一个元素添加一个 "display: flex" 属性后，这个元素就会变成一个 flex container ，它的直接子元素就会变成 flex item 成为一个 flex container 成员。特别是当我们给一个元素设置成 flex container 时，会在文档中生成一个伸缩容器，伸缩容器会为子元素内容生成一个伸缩容器上下文（FFC）。伸缩容器不是块容器，所以 flex item 不能使用那些用来控制块元素布局的属性，例如，clear，float，vertical-align 属性。

PS：flex container 默认存在两根轴线：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做  cross start，结束位置叫做 cross end。flex 项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。

flexbox 的属性分为两类： 一类为 flex 容器的属性，另一类为 flex 项目的属性。

            flexbox 容器的属性：

                            justify-content

                            align-items

                            flex-direction

                            flex-wrap

                            flex-flow

                            align-content

            flexbox 项目的属性：

                            order

                            flex-grow

                            flex-shrink

                            flex-basis

                            flex

                            align-self

1、justify-content  用来设置 flex item 在主轴方向上的对齐方式

具体示例：
#container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: center;
}
.item {
        width: 100px;
        height: 200px;
        border: 1px solid #000;
}

justify-content 属性的值有：flex-start | flex-end | center | space-around | space-between。
        flex-start：默认值，flex container 内所有的 flex item 在主轴上按从左至右方向排列（左对齐）；
        flex-end：flex container 内所有的 flex item 在主轴上按从右至左方向排列（右对齐）；
        center：flex container 内所有的 flex item 在主轴上居中对齐；
        space-around：每个 flex item 两侧的间隔相等并且项目之间的间隔比项目与边框的间隔大一倍；
        space-between：两端对齐，项目之间的间隔都相等；

2、align-items  用来设置 flex item 在交叉轴方向上的对齐方式

具体示例：
#container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        align-items: center;
}
align-items 属性的值有：flex-start | flex-end | center | baseline | stretch。
        flex-start：flex container 内所有的 flex item 在交叉轴上按从上至下方向排列（顶部对齐）；
        flex-end：flex container 内所有的 flex item 在交叉轴上按从下至上方向排列（底部对齐）；
        center：flex container 内所有的 flex item 在交叉轴上居中对齐；
        baseline：所有 flex item 中的第一行文字的基线对齐；
        stretch：默认值，如果 flex item 没有设置高度或为 auto，flex item 将会占满整个容器的高度；

3、flex-direction  用来设置主轴的方向

具体示例：
#container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: column;
}
flex-direction 属性的值有：row | row-reverse | column | column-reverse。
        row：默认值，主轴在水平方向上，起点在左端；
        row-reverse：主轴在水平方向上，起点在右端；
        column：主轴在垂直方向上，起点在上沿；
        column-reverse：主轴在垂直方向上，起点在下沿；

4、flex-wrap  用来设置 flex item 是否进行多行并反转排列

具体示例：
#container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-wrap: wrap;
}
flex-wrap 属性的值有：nowrap | wrap | wrap-reverse。
        nowrap：默认值，所有的 flex item 排列在一条水平的轴线上，不换行；
        wrap：换行，第一行在上方；
        wrap-reverse：换行，第一行在下方；

5、flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap

具体示例：
#container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-flow: column-reverse wrap-reverse;
}
flex-flow 属性的值有：row | row-reverse | column | column-reverse | nowrap | wrap | wrap-reverse。

6、align-content 属性定义了多根轴线的对齐方式，如果容器只有一根轴线，该属性不起作用

具体示例：
#container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        align-content: center;
}
align-content 属性的值有：flex-start | flex-end | center | space-around | space-between | stretch。
        flex-start：与交叉轴的起点对齐；
        flex-end：与交叉轴的终点对齐；
        center：与交叉轴的中点对齐；
        space-around：每根轴线的两侧间隔相等，并且轴线之间的间隔比轴线与边框的间隔大一倍；
        space-between：与交叉轴的两端对齐，并且轴线之间的间隔都相等；
        stretch：默认值，轴线将占满整个交叉轴；

7、order 属性用于调整 flex item 的顺序（数值越大，排列越靠后）

具体示例：
#container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
}
.item {
        width: 100px;
        height: 200px;
        border: 1px solid #000;
        order: 1;
}
order 属性的值有：-1 | 0 | 1 |  integer，默认值为 0。

8、flex-grow 属性用于定义 flex item 的放大比例（设置负值无效）

具体示例：
#container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
}
.item {
        width: 100px;
        height: 200px;
        border: 1px solid #000;
        flex-grow: 1;
}
flex-grow 属性的值：number，默认值为 0，即存在剩余空间也不放大。
PS：如果所有 flex item 的 flex-grow 属性值都为 1，则它们将等分剩余空间（如果有的话）。如果一个项目的 flex-grow 属性值为 2，其他项目都为 1，则前者占据的剩余空间将比其他项目多一倍。

9、flex-shrink 属性用于定义 flex item 的缩小比例（设置负值无效）

具体示例：
#container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
}
.item {
        width: 100px;
        height: 200px;
        border: 1px solid #000;
        flex-shrink: 1;
}
flex-shrink 属性的值：number，默认值为 1，即空间不足该项目将缩小。
PS：如果所有项目的 flex-shrink 属性值都为 1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink 属性值为 0，其他项目都为 1，则空间不足时，前者将不会缩小。

10、flex-basis 属性用于定义 flex item 占据主轴空间的大小

具体示例：
#container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
}
.item {
        width: 100px;
        height: 200px;
        border: 1px solid #000;
        flex-basis: 100%;
}
flex-basis 属性的值：length，默认值为 auto，即项目的本来大小。也可以设置固定值，如500px。
特别注意当 flex-basis 值为 0 时 flex item 分配的是容器所有的空间；当 flex-basis 值为 auto 时 flex item 分配的是容器减去所有 flex item 内容之后剩余的容器空间。

11、flex 属性是 flex-grow，flex-shrink 和 flex-basis 属性的简写形式，默认值为 0 1 auto

具体示例：
#container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
}
.item {
        width: 100px;
        height: 200px;
        border: 1px solid #000;
        flex: 1 100%;
}
flex 属性的值有两个缩写 none（0 0 auto），auto（1 1 auto）。

12、align-self 属性用于设置单个项目与其他的项目不一样的对齐方式，可覆盖容器的 align-items 属性

具体示例：
#container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
}
.item {
        width: 100px;
        height: 200px;
        border: 1px solid #000;
        align-self: flex-end;
}
align-self 属性的值有：flex-start | flex-end | center | baseline | stretch | auto。
        flex-start：flex container 内所有的 flex item 在交叉轴上按从上至下方向排列（顶部对齐）；
        flex-end：flex container 内所有的 flex item 在交叉轴上按从下至上方向排列（底部对齐）；
        center：flex container 内所有的 flex item 在交叉轴上居中对齐；
        baseline：所有 flex item 中的第一行文字的基线对齐；
        stretch：如果 flex item 没有设置高度或为 auto，flex item 将会占满整个容器的高度；
        auto：默认值，继承容器的 align-items 属性。如果容器没有该属性，则等同于 stretch；

PS：一个好玩的 flexbox 学习网站：http://flexboxfroggy.com/#zh-cn

       flexbox bugs 问题及解决方法：https://github.com/philipwalton/flexbugs

本文出自 “珞辰的博客” 博客，转载请与作者联系！