如何理解与应用css3中的弹性布局

一. 什么是弹性布局？

        1. 弹性布局的概念：

                ① 弹性布局也称为 Flex 布局(Flexbox)，Flex是Flexible Layout的缩写，意为"弹性布局"，也叫作伸缩布局 ，是一种用于设计Web页面布局的CSS技术，是一种新的布局模式；

                ② 弹性布局主要是用于移动端布局，它为盒模型提供了最大的灵活性，即可以应用于容器中，也可以应用于行内元素，可以在不同屏幕尺寸和设备上简便、高效、完整、响应式地创建各种复杂的布局结构，还可以对一个容器中的元素进行排列、齐和分配空白空间，并且对于响应式设计具有良好的支持；

                ③ 弹性布局的核心思想是通过指定容器(flex container)和其内部的子元素(flex item)来实现灵活的元素排列和分布。容器是添加弹性布局的父元素，而子元素则是弹性布局容器中的每一个子元素。

        2. 弹性布局的基本概念包括：

                ① 主轴：在弹性布局中，子元素在主轴上的排列方向可以是水平或垂直，这可以通过flex-direction属性来规定；

                ② 交叉轴：与主轴垂直的另一方向，称为交叉轴；

                ③ 弹性容器的直接子元素：会受到弹性布局的影响，成为弹性项目。

                ④ 主轴交叉轴示意图：

        2. 弹性布局的优缺点：

                （1）优点：

                                ① 适应性强，在做不同屏幕分辨率的界面时非常实用；
                                ② 可以随意按照宽度、比例划分元素的宽高；
                                ③ 可以轻松改变元素的显示顺序；
                                ④ 自适应布局实现快捷，易维护。

                （2）缺点：

                                ① PC段浏览器支持情况较差；

                                ② IE11或更低版本，不支持或仅部分支持

        3. 弹性布局简单的示例代码：

        ★ 注：在这个例子中，.container 类使用 display: flex 属性启用弹性布局。.item1, .item2, .item3 类使用 flex 属性定义了它们在主轴方向上的伸缩比例，这个布局使得 .item2 占据的空间是 .item1 和 .item3 的两倍。

二. 如何应用弹性布局？

        1. 弹性盒子（ display:flex;）：      

                ① 如果想使用弹性布局，那么，就必须将父元素做成弹性空间，这样，子元素就可以变成弹性盒子，需要注意的是，一个盒子如果变成弹性容器，那么此盒子就具有了两个轴：主轴、交叉轴；      

                ② 弹性盒子是 CSS3 的一种新的布局模式，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间；

                ③ 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成，弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器，弹性容器内包含了一个或多个弹性子元素；

注意： 弹性容器外及弹性子元素内是正常渲染的，弹性盒子只是定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

以下是示例代码，展示了弹性子元素在一行内显示，方向从左到右:

        2. 生效在父容器(弹性容器)的属性：

                ① 确定主轴方向：在弹性容器中，元素按照主轴排列
                            flex-direction: 
                                        row 默认值
                                        row-reverse 反向行是主轴

                                        column 列做主轴

                                        column-reverse 反向列做主轴

                ② 主轴方向是否换行
                            flex-wrap: nowrap | wrap | wrap-reverse;

                                        nowrap： 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器；

                                        wrap ：弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行；

                                        wrap-reverse：反转 wrap 排列。

         2. 主轴方向的对齐方式：

                    justify-content: 
                                flex-start (默认值) : flex 项从主轴的开始位置（main-start）开始排布；
                                flex-end : flex 项从主轴的结束位置（main-end）开始排布；

                                center: flex 项沿主轴居中排布；

                                space-between: flex项沿主轴均匀排布，即我们常说的沿主轴 两端对齐 ，第一个flex 项在主轴开始位置，最后一个flex 项在主轴结束位置；

                                space-around: flex 项沿主轴均匀排布。要注意的是 flex 项看起来间隙是不均匀的，因为所有 flex 项两边的空间是相等的。第一项在容器边缘有一个单位的空间，但是在两个 flex 项之间有两个单位的间隙，因为每个 flex 项的两侧都有一个单位的间隙；

                                space-evenly: 任何两个 flex 项之间的间距（以及到 flex 容器边缘的空间）相等。（注：该属性以前很少看到，原因是以前浏览器不支持，chrome 也是 60 版本之后才支持。延伸一下，align-content: space-evenly 也是这个逻辑 ）。

        3. 交叉轴方向的对齐方式：

                    align-items:
                                flex-start: flex 项按照交叉轴的开始位置（cross-start）对齐；

                                flex-end: flex 项按照交叉轴的结束位置（cross-end）对齐；

                                center: flex 项以交叉轴为中心，居中对齐；

                                baseline: flex 项按照他们的文字基线对齐；

                                stretch (默认值) : 拉伸 flex 项以填充整个容器（这里特别要注意，如果 flex 项有尺寸属性（min-width / max-width / width / min-height / max-height / height），那么首先应用这些尺寸属性）。

        4. 如何分配交叉轴的剩余空间：此属性只有在交叉轴有多条内容时才生效

                align-content:
                                flex-start：多行在容器的交叉轴开始位置排布；

                                flex-end：多行在容器的结束位置排布；

                                center：多行在容器的中间位置排布；

                                space-between：多行均匀分布；第一行分布在容器的开始位置，最后一行分布在容器的结束位置；
                                space-around: 多行均匀分布，并且每行的间距（包括离容器边缘的间距）相同；
                                stretch（默认值）：占满整个交叉轴。前提不设置大小属性设置大小属性设置大小属性设置大小属性设置大小属性设置大小属性。

        5. 生效在子元素身上的属性

                ① order ：排序，属性设置弹性容器内弹性子元素的属性，值越小，排名越靠前，默认值是0

                ② flex-grow: 定义子元素的放大比例; 默认值是0，不放大；

                ③ flex-shrink: 1; 定义元素在主轴占不下时的缩小比例，默认值是1，表示等比缩小；

                ④ flex: flex-grow flex-shrink flex-basis;
                            默认: 0 1 auto;
                            经常会用到的两个书写方式：
                                        flex: auto | none;
                                        auto: 1 1 auto; 开启子选项的放大行为
                                        none: 0 0 auto; 关闭子选项的缩小行为

                ⑤ align-self: 他的值跟align-items的值一模一样，只是，此属性是设置某一个元素的交叉轴对齐方式。