CSS布局之flex布局

最近项目中涉及到手机端开发，那么flex布局是必不可少的，这里我来重新梳理一下

1. 介绍

flex布局也被成为伸缩盒布局，在flex布局模型中，flex容器的子元素可以在x轴或y轴上进行布局，并且子元素可以伸缩他们的大小，当容器中还有空间它们会伸展以填充容器未使用的空间，当容器空间缩小的时候，他们也会跟着缩小。

2. 应用

2.0 基本概念

主轴与交叉轴,主轴由flex-direction来定义，交叉轴是主轴的垂直方向的轴

- flex-direction:row

- flex-direction:column

2.1 hello world

伸缩盒布局的应用很简单，只需要为容器元素添加display: flex;即可

    <article class="container_1">
        <section>one</section>
        <section>
            two <br>
            two_1 <br>
            two_2 <br>    
            two_3 <br>
        </section>
        <section>three</section>
    </article>
    
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .container_1 {
            display: flex;
            justify-content: flex-start;
            /*平分容器，内容居中*/
            /*justify-content: space-around; */
            /*平分容器，内容显示在边缘，其余被空白占*/
            /*justify-content: space-between;*/
            /*内容居中*/
            /*justify-content: center;*/
        }
        .container_1 > section:nth-child(1){
            background-color: lightblue;
        }
        .container_1 > section:nth-child(2){
            background-color: pink;
        }
        .container_1 > section:nth-child(3){
            background-color: lightgreen;
        }
        .container_1 > section:nth-child(4){
            background-color: orange;
        }
    </style>

justify-content: flex-start;如图，内容在flex容器的左侧开始排列，空白显示在右侧

justify-content: space-around; 如图，空白会被等分然后填充到子元素的左右

justify-content: space-between; 如图，空白不会出现左右边缘,其余部分空白等分并且进行填充

justify-content: center; 如图，内容居中，空白均分出现在两侧

如果子元素的内容足够多，将如图显示

2.2 align-items

用于定义与主轴垂直方向上子元素的显示方式

align-items: stretch; 默认值，拉伸

align-items: center; 不拉伸，居中显示

align-items: flex-start;不拉伸，在flex布局的开始位置显示

align-items: flex-end; 不拉伸，在flex布局的结束位置显示

2.3 flex-direction

定义主轴方向，默认主轴为X周，该属性的取值为 row

flex-direction: row; 主轴为X轴

flex-direction: column; 主轴为Y轴

2.4 flex-wrap

定义是否可以换行，默认值为nowrap

flex-wrap:nowrap ,当flex item中的文本足够长的时候也不会导致其他item换行，而是调整其高度以容纳更多内容。

flex-wrap:wrap ,当flex item中的文本足够长的时候会占满整个容器，然后其他item将会导致换行

2.5 flex-flow

是flex-direction 与 flex-wrap的速写形式。例如

flex-flow: row wrap;

2.6 flex-basis 与 flex-grow

这两个属性定义在flex item上，flex-basis定义了在分配多余空间之前，flex item占据的主轴空间,默认值为auto,与width类似。 flex-grow定了分配多余空间的的规则,例如

    <style>
        .container_1 {
            margin: 0 auto;
            width: 600px;
            display: flex;
            flex-flow: row nowrap;
        }
        .container_1 > section:nth-child(1){
            background-color: lightblue;
            flex-basis: 100px;
            flex-grow: 1;
        }
        .container_1 > section:nth-child(2){
            background-color: pink;
            flex-basis: 100px;
            flex-grow: 2;
        }
        .container_1 > section:nth-child(3){
            background-color: lightgreen;
            flex-basis: 100px;
            flex-grow:1; 
        }
    </style>

    <article class="container_1">
        <section>flex is a new value  added to the CSS display property. Along with inline-flex it causes the element that it applies to to become a flex container, and the element's children to each become a flex item. The items then participate in flex layout</section>
        <section>
            two <br>
            two_1 <br>
            two_2 <br>    
            two_3 <br>
        </section>
        <section>flex is a </section>
    </article>

从上面的样式上，我们可以看出，每个section的flex-basis 基础宽度为100px,flex容器总宽度为600px，这样，剩下的空白区域也就是300px，那么这300像素如何风格呢？这时候就要看没有flex item的flex-grow取值，该值默认为auto,但是我们这里是这么指定的，第一个第三个section为1，第二个section为2，也就是说第一个第三个section各占1/4，也就是75px,第二个section占2/4，也就是150px。所以最后第一个第三个section占175px,第二个section占250px.

2.7 flex-basis 与 flex-shrink

flex-shrink 同样应用到flex item元素上，与flex-grow作用相反，flex-grow表示当flex-basis的和小于flex容器宽度的时候，如何分配剩余空间进行宽度的增长。而flex-shrink表示当flex-basis的和大于flex容器宽度的时候，按照哪种比例进行缩小

    <style>
        .container_1 {
            margin: 0 auto;
            width: 600px;
            display: flex;
            flex-flow: row nowrap;
        }
        .container_1 > section:nth-child(1){
            background-color: lightblue;
            flex-basis: 300px;
            flex-grow: 1;
            flex-shrink: 1;
        }
        .container_1 > section:nth-child(2){
            background-color: pink;
            flex-basis: 300px;
            flex-grow: 2;
            flex-shrink: 2;
        }
        .container_1 > section:nth-child(3){
            background-color: lightgreen;
            flex-basis: 300px;
            flex-grow:1; 
            flex-shrink: 1;
        }
        .container_1 > section:nth-child(4){
            background-color: orange;
        }
    </style>

flex容器的宽度为600px;而flex item加起来为900px,为了能占满flex容器，flex item必须缩小300px; 那么谁应该缩小呢？这时候要看每个flex item上flex-shrink的定义,然后计算出比例

2.7 flex速写

一般情况下，我们很少使用flex-basis,flex-grow,flex-shrink,而是使用它们的速写形式flex。

flex: flex-grow flex-shrink flex-basis

例如

        .container_1 > section:nth-child(1){
            background-color: lightblue;
            flex-basis: 1 1 300px;
        }
        .container_1 > section:nth-child(2){
            background-color: pink;
            flex-basis:2 2 300px;
        }
        .container_1 > section:nth-child(3){
            background-color: lightgreen;
            flex-basis:1 1 300px;
        }

3. flex实际应用

在实际开发过程中，我们经常会应用到网格布局，一般采用的是float技术，然后封装成一个网格框架进行应用，例如bootstrap的网格布局。但是网格布局也有一些缺陷，比如，它具有两个维度，行与列，再有些项目中我们希望我们的item是一维的，例如：

    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .container_1 {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-around;
        }
        .container_1 > section {
            margin: .5em;
            flex: 1 1 200px;
            background-color: orange;
        }
    </style>

    <article class="container_1">
        <section>
            one <br>
            one <br>
            one <br>
            one <br>
        </section>
        <section>two</section>
        <section>three</section>
        <section>four</section>
        <section>five</section>
        <section>six</section>
        <section>seven</section>
        <section>
            one <br>
            one <br>
            one <br>
            one <br>
        </section>
        <section>two</section>
        <section>three</section>
        <section>four</section>
        <section>five</section>
        <section>six</section>
        <section>seven</section>
    </article>

当然，有些同学觉得这样可能和需求不相匹配了，因为我们的代码中flex item的宽度会发生变化，这时候只需要 flex: 0 1 200px;即可，

CSS布局之flex布局

1. 介绍

2. 应用

2.0 基本概念

2.1 hello world

2.2 align-items

2.3 flex-direction

2.4 flex-wrap

2.5 flex-flow

2.6 flex-basis 与 flex-grow

2.7 flex-basis 与 flex-shrink

2.7 flex速写

3. flex实际应用

李春雨

引用和评论

vue3源码-编译系统

开发插件集合

CSS 如何模拟“真实的”进度条？

使用flex布局解决经典布局中overflow必须设置高度才能滚动问题

CSS垂直水平居中

纯CSS实现有趣emoji切换开关

SAP CRM Fiori 应用和 SAP Commerce Cloud (电商云) UI 如何通过调整CSS来改变UI显示风格