前端知识点（三）：Flex布局（弹性布局）

1.定义flex布局

(1)display:flex;

(2)行内元素 display:inline-flex;

父元素中设置为flex布局，形成flex容器。子元素的float、clear、vertical-align属性将失效。

2.Flex容器属性--定义在父元素中

排列：

（1）flex-direction：决定了主轴的方向(子元素的排列方向)

row:(默认)水平方向从左到右为主轴；

row-reverse:水平方向从右到左为主轴；

column:垂直方向从上到下为主轴；

column:垂直方向从下到上为主轴；

（2）flex-wrap:决定了当子元素在一条轴线上排不下时，是否换行

nowrap:（默认）不换行；   

wrap:向下换行；

wrap-reverse:向上换行

（3）flex-flow:是flex-direction和flex-wrap的的简写，默认值row nowrap

对齐：

（4）justify-content:子元素在主轴方向上的对齐方式

flex-start:（默认）与主轴的起点对齐；

flex-end:与主轴的终点对齐；

center:与主轴的中点对齐；

space-between:两边对齐；

space-around:两边等间隔对齐；（子元素之间的间隔是子元素与边框间隔的二倍）

 

（5）align-items:子元素在交叉轴的对齐方式

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

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

center:交叉轴中点对齐；

baselin:子元素第一行文字的基线对齐；

stretch:(默认)：占满容器的高度；

 

（6）align-content:多根轴线（多行显示）的对齐方式

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

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

center:交叉轴中点对齐；

space-between:交叉轴两边对齐；

space-around:轴线两侧等间隔对齐；（轴线之间的间隔是轴线与边框之间间隔的二倍）

stretch:轴线占满整个交叉轴；

3.Flex项目（成员）的属性--定义在子元素上

（1）order:子元素的排列顺序。数值越小越靠前。

（2）flex-grow:子元素的放大比例。默认0。即存在剩余空间，也不放大

 

（3）flex-shrink:子元素的缩小比例。默认1。即空间不足，子元素将缩小        

 

（4）flex-basis:在分配多余空间时，子元素占据的主轴空间，默认值auto。即子元素本来大小

（5）flex:是flex-grow、flex-shronk、flex-basis的简写，默认值0 1 auto。

（6）align-self:允许某一个子元素与其他子元素对齐方式不同，默认auto,表示继承父元素的align-items属性。

auto:继承父元素的align-items属性；

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

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

center:交叉轴中点对齐；

baselin:子元素第一行文字的基线对齐；

stretch:(默认)：占满容器的高度；

 

4.基础应用

垂直居中对齐

.father {//父盒子
    display: flex;
    justify-content: center;
    align-items: center;
}