Flex弹性盒子

这篇文章主要是分享了Flex弹性盒模型的基本概念, 简要介绍了Flex弹性盒模型的发展历程，最后重点介绍了Flex container六个属性以及Flex item的六个属性。下面我们就一一的往下看：


基本概念


Flex弹性盒模型是2009年W3C提出的一种新的布局方案，叫做Flex布局也叫作弹性盒子模型。它可以完整、简便、响应式的实现各种页面布局。布局的最外层元素叫做Flex容器（flex container），flex容器下面的子元素称之为容器成员（flex item）。
Flex容器默认存在两根轴，区别是：水平主轴（main axis）和垂直交叉轴（cross axis）；水平主轴的起始轴叫做main start，结尾叫做main end；垂直交叉轴的起始和结尾轴区别是cross start和cross end。容器成员flex item默认沿着主轴排列，单个容器成员占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
如下图所示：


发展历程


从2009年W3C制定这个标准以来，总共经历了三个版本。
最老款本，两个属性区别为：
box（弹性伸缩盒）和inline-box（内联块级弹性伸缩盒）过渡版本
flexbox（弹性伸缩盒）和inline-flexbox（内联块级弹性伸缩盒）最新款本
flex（弹性伸缩盒）和inline-box（内联块级弹性伸缩盒）
容器（Flex container）属性


Flex container容器属性分为六个：flex-direction、flex-wrap、flex-flow、justify-content、align-items和align-content，决定了子元素的排列方式，包括横向、纵向和一些对齐方式。

flex-direction（决定主轴方向），主要有四个值：
1 row（横向从左到右排列，左对齐）
2 row-reverse（右对齐）
3 column（纵向排列）
4 column-reverse（反转纵向排列）flex-wrap（换行），主要有三个值：
1 nowrap（子元素溢出时不换行）
2 wrap（子元素溢出自动换行）
3 wrap-reverse（反转wrap排列）flex-flow（flex-direction与flex-wrap简写）
.main {         
display: flex;         
flex-flow: wrap row;
 }justify-content（容器成员 (flex item) 主轴上的对齐方式），主要有六个值：
1 flex-start（主轴起始位置对齐 - 左对齐）
2 flex-end（主轴结束位置对齐 - 右对齐）
3 center（主轴中间位置对齐 - 居中）
4 space-between（平均地分布在主轴上）
5 space-around （平均地分布在主轴上, 两端保留子元素与子元素之间间距大小的一半）
6 space-evenly（平均地分布在主轴上, 两端保留子元素与子元素之间间距相同间距）align-item（容器成员 (flex item) 交叉轴上的对齐方式），主要有五个值：
1 stretch（拉伸容器成员 (flex item) 适应容器 - 默认属性）
2 flex-start（交叉轴起始位置对齐 - 上对齐）
3 flex-end（交叉轴结束位置对齐 - 下对齐）
4 center （交叉轴中间位置对齐 - 居中）
5 baseline（容器成员 (flex item) 基线对齐）align-content（多根轴线的对齐方式, 单轴线不起作用 - 每一根轴线理解为一个容器成员 (flex item)），一共有七个属性，和justify-content属性很相似但是多了一个stretch属性：
1 flex-start（子元素溢出并且换行，父元素的高度大于子元素高度的总和-上对齐）
2 flex-end（下对齐）
3 center（居中对齐）
4 space-between（中间间隔）
5 space-around（两侧间隔）
6 space-evenly（平均分布）
7 stretch（拉伸，如果有高度的设置，属性不起作用）
容器成员 (flex item) 属性


flex item容器成员属性主要也包括了六个属性：order、flex-grow、flex-shrink、flex-basis、flex、align-self，决定每一个容器成员自己的属性。

order（容器成员排列顺序，默认值是0，数值越小，排列越靠前，可以为负值）.item{       order: 1; }flex-grow（容器成员放大比例，默认值也是0，也就是不增长，数值越大，占据剩余空间越大，不允许为负值）flex-shrink（容器成员缩小比例，默认值是1，0是不压缩，1是等比例压缩，数值越大，压缩比例越大，不允许为负值，压缩有一个最小宽度制约）flex-basis（分配多余空间之前，容器成员占据的主轴空间）
实际上flex-basis就是width，但是优先级比width要高，比min-width和max-width又要低，是介于三者之间的一个属性，总共有三个值：
1 auto
2 px
3 %flex（flex-grow, flex-shrink 和 flex-basis的简写）
有三个特殊的值：auto（1 1 auto）、none（0 0 auto）、1（1 1 auto）。.item {      flex-basis: 50px;  }align-self（允许单个容器成员有与其他容器成员差异的对齐方式），总共有六个值：
1auto （默认，遵循flex-content的属性）
2 flex-start
3 flex-end
4 center
5 baseline
6 stretch
.item {    
 align-self: auto; 
}