好用的弹性布局

弹性布局，在网页布局中是我们常见的一种布局方式，它简单的居中方式，让我们编程员爱不释手，先看一下思维导图：

 

弹性布局的目的就是为了让父级可以控制子级的宽高，对齐方式，完成更好的布局。属性 display：flex；/display：inline-flex；将盒子声明为弹性盒子。他俩的区别就是display：flex；子级会占满父级。display：inline-flex；子级撑开父级。弹性布局主要为了对齐方式分为写在父级用于子级和写在子级用于子级。我们分别来看。

写在父级用在子级：子级的排列顺序flex-direction：row从左到右/row-reverse从右到左/column从上到下/column-reverse从下到上。flex-wrap：wrap换行/nowrap不换行。flex-flow符合属性，将排列顺序和是否换行复合书写。justify-content水平方向对齐方式flex-start左对齐/flex-end右对齐/center居中/space-between两边顶格中间平均分配/space-around子级空间平均分配父级。align-items弹性盒子单行垂直方向对齐方式flex-start置顶/flex-end置底/center居中/baseline与基线对齐。align-content：多行垂直方向换行对齐方式 flex-start置顶/flex-end置底/center居中/space-content上下顶格中间居中/space-around所有子级平均分配空间。

写在子级用于子级。order：排列顺序，值越小排名越前.flex-grow：分配剩余空间，值越大分配空间越大。flex-shrink 起效前提自己宽度和比父级宽度大。按比例分配空间。

下面是案例：

 <div class="item">

                <img src="img/icon/1.png" alt="" style="width:50%;">

                <p>酒店</p>

            </div>

            <div class="item">

                <img src="img/icon/2.png" alt="" style="width:50%;">

                <p>酒店</p>

            </div>

css弹性布局

  header {

            display: flex;

            /* justify-content: space-around; */

            flex-wrap: wrap;

        }

       

        header .item {

            width: 20%;

            text-align: center;

            margin-top: 10px;

        }

       

        header .item img {

            width: 30%;

        }

运行结果：