大家好，这里是demo锁屏面试题，今天为大家分享的是flex布局。

flex布局：CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行行/列。

对于学习flex布局我们得首先知道以下技术点：

--什么是容器，什么是项目，什么是主轴，什么是侧轴？

--项目永远排列在主轴的正方向上

--弹性盒子模型分老版与新版：

      老版本的我们通常称之为box：-webkit-box

新版本的我们通常称之为flex：-webkit-flex / flex

以下为大家介绍新版本flex布局

flex-direction：控制主轴是哪一根，控制主轴的方向，即控制容器的布局方向及排列方向。

row：从左往右的x轴

row-reverse：从右往左的x轴

column从上往下的y轴

column-reverse：从下往上的y轴

 

富裕空间的管理：(只决定富裕空间的位置，不会给项目区分配空间)

主轴justify-content

flex-start：在主轴的正方向

flex-end: 在主轴的反方向

center：在两边

space-between：在项目之间

space-around：在项目两边      

侧轴align-items

flex-start：在侧轴的正方向

flex-end：在侧轴的反方向

center：在两边

baseline：基线对齐

stretch：等高布局（项目没有高度）

 

弹性空间的管理：将富裕空间按比例分配到各个项目上

flex-grow属性定义弹性盒子项（flex item）的拉伸因子，默认值为0。

可用空间 = (容器大小 - 所有相邻项目flex-basis的总和)

可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)

每项伸缩大小 = (伸缩基准值 + (可扩展空间 x flex-grow值))

 

flex-shrink属性指定了 flex 元素的收缩因子  默认值为1，只有在 flex-wrap:nowrap时才有作用

 

flex-basis指定了 flex 元素在主轴方向上的初始大小

默认值 ：auto  不可继承，注意：在flex简写属性中flex-basis的默认值为0

 

flex-wrap属性控制了容器为单行/列还是多行/列。并且定义了侧轴的方向，新行/列将沿侧轴方向堆砌。

默认值：nowrap 不可继承

值：nowrap | wrap | wrap-reverse 

 

align-content属性定义弹性容器的侧轴方向上有额外空间时，如何排布每一行/列、也可理解为多行多列时,富裕空间的管理，会把所有行、列看成一个整体。当弹性容器只有一行/列时无作用

默认值：stretch    不可继承 

 

flex-flow属性是设置“flex-direction”和“flex-wrap”的简写，控制主轴和侧轴的位置以及方向

默认值：row nowrap    不可继承

 

order属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局，order越大越后。

默认值：0   不可继承

 

align-self会对齐当前 flex 行中的 flex 元素，并覆盖 align-items 的值. 如果任何 flex 元素的侧轴方向 margin 值设置为 auto，则会忽略 align-self。

默认值：auto    不可继承

 

flex是 flex-grow，flex-shrink，flex-basis 的简写属性

默认值  flex-grow: 0  不可继承

             flex-shrink: 1

             flex-basis: auto 

值flex: none;/* 0 0 auto */

flex：1;/* 1 1 0% */

 

最后，给大家推荐一个flex练习网站：http://flexboxfroggy.com/