flex弹性盒子布局

css3最喜欢的属性就是flex布局属性，flex布局简单，方便，快速

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现.

flex(flexble box:弹性布局盒模型)，是2009年w3c提出的一种可以简洁，快速弹性的布局属性。W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。它已经得到了几乎所有浏览器最新版本的支持，但是考虑历史版本，在部分浏览器上兼容性不太好，需要在代码中添加浏览器支持。

主要思想：给予容器控制内部元素高度和宽度的能力；

其中在webkit内核的浏览器中使用时，必须加上-webkit-前缀

1.了解相关的基本概念：

（1）容器:需要添加弹性布局的父元素

（2）项目：弹性布局项目中的每一个子元素，成为项目；

2.了解两个基本方向

（1）主轴：在弹性布局中，我们会通过属性规定水平/垂直方向为主轴；

（2）交叉轴：与主轴垂直的另一个方向，成为交叉轴

2.弹性布局的使用：

（1）给父容器添加display:flex/inline-flex属性，即可使容器内容采用弹性布局显示，而不是遵循常规的文档流的显示方式

（2）容器添加弹性布局后，仅仅是容器内容采用弹性布局，而荣容器自身子啊文档流中的定位方式依然遵循常规文档流；

（3）display:flex;容器添加弹性布局后，显示为块级元素

         display:inline-flex;容器添加弹性布局后，显示为行内元素

（4）设为flex布局后，子元素的float, clear,和vartical-align属性将失效，但position属性依然生效

代码实例：

<div id="div">
            <div class="div1">1</div>
            <div class="div2">2</div>
            <div class="div3">3</div>
            <div class="div4">4</div>
        </div>

#div{
                width: 400px;
                height: 400px;
                background-color: yellow;
                display: flex;
                
            }
            #div div{
                width: 100px;
                height: 100px;
                background-color: blue;
                color: white;
                font-size: 30px;
                
            }

五个简单的div，只给父容器添加了display: flex;属性，就可以让容器内部打破原有文档流模式，展现为弹性布局。

详解配合display:flex使用的12的大属性，其中6个作用于父容器，6个作用于子项目

3.容器属性详述

作为父容器的6大属性

（1)flex-direction属性决定主轴方向（即项目的排列方向）

决定主轴的方向，即项目排列的方向，有四个可能的值：row(默认)、row-reverse|column|column-reverse

row:主轴为水平方向，项目沿主轴从左至右排列

column:主轴为竖直方向，项目沿主轴从上至下排列

row-reverse:主轴水平，项目从右至左排列，与row反向

column-reverse:主轴竖直，项目从下至上排列，与column

（2）flex-wrap属性：如果一条轴线排列不下，应该如何换行

nowrap(默认)：不换行。当宽度不够时，每个项目会被挤压宽度

wrap:换行，并且第一行在容器最上方

wrap-reverse:换行，并且第一个行在容器最下方

（3）flex-flow是flex-direction和flex-wrap的缩写形式，默认值为：

flex-flow:row  wrap;

(4)justify-content属性定义了项目在主轴上的对齐方式。

此属性与主轴方向息息相关。

主轴方向为：row起点在左边，row-reverse起点在右边，column起点在上边，column-reverse起点在下边

justify-content:flex-start;(默认值)：项目位于主轴起点；

justify-content:flex-end;项目位于主轴终点；

justify-content:center;居中；

space-between:两端对齐，项目之间的间隔都相等。（项目的开头和最后一个项目与父容器的边缘没有间隔）

space-around:每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边缘框的间隔大门一倍。（开头和最后的项目，与父容器边缘有一定的间隔）

（5)align-items属性定义项目在交叉轴上如何对齐

（即在垂直于主轴方向如何对齐）

flex-start:交叉轴的起点对齐；

flex-end:交叉轴的终点对齐；

center:交叉轴的中点对齐；

baseline:项目的第一行文字的基线对齐（文字的行高、字体大小会影响每行的基线）

stretch(默认值)：如果项目未设置高度或者设为auto，将占满整个容器的高度

（6）align-content

该属性定义了多根主轴时，即item不止一行时，多行在交叉轴上的对齐方式。

注意：当有多行时，定义了align-content后，align-items属性将会失效。

align-content可能值含义如下：

flex-start:左对齐；

flex-end:右对齐；

center:居中；

space-between:两边对齐；

space-around:每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边缘框的间隔大门一倍。（开头和最后的项目，与父容器边缘有一定的间隔）

strenth:如果没有定义高度或者设为auto,将占满整个容器的高度。

2.作用于子项目的6大属性

（1）order

定义项目的排列顺序。数值越小越靠前，默认值为：0；

（2）flex-grow

定义项目的放大比例，默认为0，如果存在剩余空间也不放大

（3）flex-shrink

定义了项目的缩小比例，默认为1，如果空间不足，该项目会缩小

如果将某个div的样式设置为flex-shrink:0;则该div不挤压宽度，其余的div将被挤压宽度

（4）flex-basis定义项目占据的主轴方向。（如果主轴为水平，则设个属性，相当于设置项目的

宽度。原来的width将会失效）

（5）flex属性是flex-grow,flex-shrink,flex-basis的简写。默认值为0 1 auto;后两个属性可选

（6）align-self:定义单个项目自身在交叉轴上的排列方式。可以覆盖掉父容器的align-items属性值

出处：https://www.cnblogs.com/jerehedu/p/7358329.html