CSS进阶系列一（flex布局基础知识——介绍、规范、主要思想、专业术语）

一、介绍

flex是flexible box的缩写，意为弹性布局。flexible box是CSS3新增加的，用来为盒模型提供最大的灵活性。

1. flex旨在提供一个更加有效的方式来布置，对齐和分布在容器之间的各项内容，即使它们的大小是未知或者动态变化的。

2. flex的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间（主要是为了容纳所有类型的显示设备和屏幕尺寸）的能力。

二、规范

1. flex布局由于历史原因，分成旧版本(display: box;)，混合版本(display: flexbox;)，新版本(display: flex;)

    2009年7月 工作草案 (display: box;)
    2011年3月 工作草案 (display: flexbox;)
    2011年11月 工作草案 (display: flexbox;)
    2012年3月 工作草案 (display: flexbox;)
    2012年6月 工作草案 (display: flex;)
    2012年9月 候选推荐 (display: flex;)
   
    后续讲解均用新版本——display: flex;
   

三、主要思想

因为flex布局是一个模块，而不是一个单一的属性，所以涉及很多东西。其中有一些是容器上的属性（父元素，也被称为“flex容器”），而有一些是容器子元素上的属性（常称为“flex项目”）

下面用一张图来解释其主要思想

基本上，Flex项目是沿着main axis(从main-start向main-end)或者cross axis(从cross-start向cross-end)排列。

1. main axis:Flex容器的主轴主要用来配置Flex项目。注意，它不一定是水平，这主要取决于flex-direction属性。

2. main-start | main-end:Flex项目的配置从容器的主轴起点边开始，往主轴终点边结束。

3. main size:Flex项目的在主轴方向的宽度或高度就是项目的主轴长度，Flex项目的主轴长度属性是width或height属性，由哪一个对着主轴方向决定。

4. cross axis:与主轴垂直的轴称作侧轴，是侧轴方向的延伸。

5. cross-start | cross-end:伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。

6. cross size:Flex项目的在侧轴方向的宽度或高度就是项目的侧轴长度，Flex项目的侧轴长度属性是width或height属性，由哪一个对着侧轴方向决定。

四、专业术语

flex容器属性

1.伸缩容器display：定义一个Flex容器，根据其取的值来决定是内联元素inline-flex还是块级元素flex。

.display {
        display: flex;                //块级元素
        display: inline-flex;                        //内联元素
    }

2.伸缩流方向flex-direction：定义Flex项目在Flex容器中排列的方向。

.flex-direction {
        flex-direction: row;                //（默认值）从左向右排列（书写方式以left、center、right标准），即水平方向
        flex-direction: row-reverse;        //从右向左排列（书写方式以left、center、right标准），即反向水平
        flex-direction: column;                //从上到下排列，即垂直方向
        flex-direction: column-reverse;        //从下向上排列，即反向垂直
    }

3.伸缩换行flex-wrap：规定伸缩项目是否沿着侧轴排列

.flex-wrap {
        flex-wrap: nowrap;                //（默认值）单行显示，即不换行
        flex-wrap: wrap;                //多行显示（书写方式以left、center、right标准），即内联元
        flex-wrap: wrap-reverse;        //反向多行显示（书写方式以left、center、right标准），即反转换行
    }

4.伸缩流方向和换行flex-flow：是flex-direction和flex-wrap两个属性的缩写

.flex-flow {
        flex-flow: row nowrap;            //（默认值）中间用空格隔开
    }

5.主轴对齐justify-content：控制flex容器内项的水平对齐方式

.justify-content {
        justify-content: flex-start;        //（默认值）伸缩项目向一行的起始位置靠齐
        justify-content: flex-end;            //伸缩项目向一行的结束位置靠齐
        justify-content: center;            //伸缩项目向一行的中间位置靠齐（如果剩余空间是负数，则保持两端溢出的长度相等）
        justify-content: space-between;        //伸缩项目会平均地分布在行里
        justify-content: space-around;        //伸缩项目会平均地分布在行里，两端保留一半的空间
    }

6.侧轴对齐align-items：控制flex容器内项的垂直对齐方式

.align-items {
        align-items: flex-start;        //伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边
        align-items: flex-end;            //伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边
        align-items: center;            //伸缩项目的外边距盒在该行的侧轴上居中放置。（如果伸缩行的尺寸小于伸缩项目，则伸缩项目会向两个方向溢出相同的量）
        align-items: baseline;            //如果伸缩项目的行内轴与侧轴为同一条，则该值和flex-start等效
        align-items: stretch;            //（默认值）如果侧轴长度属性的值为auto，则此值会使项目的外边距盒的尺寸在遵照min/max-width/height属性的限制下尽可能接近所在行的尺寸。
    }

7.堆栈伸缩行align-content：当伸缩容器的侧轴还有多余空间时，用来调准伸缩行在伸缩容器里的对齐方式

.align-content {
        align-content: flex-start;        //各行向伸缩容器的起点位置堆叠
        align-content: flex-end;        //各行向伸缩容器的结束位置堆叠
        align-content: center;            //各行向伸缩容器的中间位置堆叠
        align-content: space-between;    //各行在伸缩容器中平均分布
        align-content: space-around;    //各行在伸缩容器中平均分布，在两边各有一半的空间
        align-content: stretch;            //（默认值）各行将会伸展以占用剩余的空间
    }
//次属性在伸缩项目有多行时才会生效

flex项目属性

8.order：控制Flex项目的顺序源
根据order重新排序伸缩项目。有最小（负值最大）order的伸缩项目排在第一个。若有多个项目有相同的order值，这些项目照文件顺序排。

.order {
        order: <number>;        //默认按文档源的流顺序排列
    }

9.伸缩性flex：是flex-grow扩展比例，flex-shrink收缩比例和flex-basis伸缩基准值三个属性的缩写（flex-shrink和flex-basis是可选值）

`flex-grow`：扩展比例

`flex-shrink`：收缩比例

`flex-basis`：伸缩基准值

.flex {
        flex-grow: <number>（默认值是0）;
        flex-shrink: <number>（默认值是1）;
        flex-basis: <length>（默认值是auto）;
    }
/*缩写   常用值*/
.flex｛
        flex：none    //等于flex-grow:0;flex-shrink:0;flex-basis:auto;
        flex：auto    //等于flex-grow:1;flex-shrink:1;flex-basis:auto;
        flex：0 auto    //等于flex-grow:0;flex-shrink:1;flex-basis:auto;（初始值）
        flex：initial    //等于flex-grow:0;flex-shrink:1;flex-basis:auto;（初始值）
｝

注意：float，clear和vertical-align属性在Flex项目中无效

（部分信息借鉴于《图截CSS3——核心技术与案例实战》不得不说这是本好书，茂茂就是看这个学的）

欢迎各位打赏点赞哦！！！我会更加努力的！！！