关于flex布局学习分享

大家好，这里是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/