flex布局

CSS3 弹性盒子(Flexible Box 或 Flexbox)

是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行/列。对于许多应用程序，弹性盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。
弹性盒模型，分老版与新版。老版本的我们通常称之为box，新版本的我们通常称之为flex
容器与项目
主轴 与 侧轴： 由flex-direction/-webkit-box-orient确定
有了新版本后，为什么还需要老版本？
（新版本比老版本要强大的很多）
很多移动端浏览器内核版本都超低
- 老版本的弹性盒子
display:-webkit-box
- 容器
- 容器的布局方向：

-webkit-box-orient: horizontal;
-webkit-box-orient: vertical;

- 容器的排列方向：

-webkit-box-direction: normal;
-webkit-box-direction: reverse;

- 富裕空间管理：不会给项目区分配空间，只是确定富裕空间的位置
（主轴）

-webkit-box-pack:
可选值为：start,end,center,justify

（侧轴）

-webkit-box-align:
可选值为：start,end,center

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

-webkit-box-flex: 1/2/3...;

- 新版本的弹性盒子
display:flex;
- 容器
- 容器的布局方向：

flex-direction:row;
flex-direction:column;

- 容器的排列方向：

flex-direction:row-reverse;
flex-direction:column-reverse;

- 富裕空间管理:
(主轴)

justify-content:;
可选值：flex-start，flex-end，center，space-between，space-around(box 没有的)

（侧轴）

align-items: ;
可选值：flex-start，flex-end，center，baseline,stretch

- flex-wrap: 属性控制了容器为单行/列还是多行/列。并且定义了侧轴的方向，新行/列将沿侧轴方向堆砌。项目超出容器的范围，会自动换行，并且将每一行都分配富裕空间。
默认值：nowrap 不可继承
值：nowrap | wrap | wrap-reverse
- flex-flow： 属性是设置“flex-direction”和“flex-wrap”的简写
- align-content： 属性定义弹性容器的侧轴方向上有额外空间时，如何排布每一行/列。当弹性容器只有一行/列时无作用。所以，通常是在flex-wrap之后使用，是弹性容器变为多行。
默认值：stretch 不可继承
值：flex-start： 所有行/列从侧轴起点开始填充。第一行/列的侧轴起点边和容器的侧轴起点边对齐。
接下来的每一行/列紧跟前一行/列。
（flex-end,center,space-around,space-bwteen是相似的）
stretch: 拉伸所有行/列来填满剩余空间。剩余空间平均的分配给每一行/列
- 项目
- 弹性空间管理：
flex-grow: 1
- order: 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局
默认值：0 不可继承
- align-self： 会对齐当前 flex 行中的 flex 元素，并覆盖 align-items 的值. 如果任何 flex 元素的侧轴方向 margin 值设置为 auto，则会忽略 align-self。表示项目中项目自己在侧轴上的位置。
- flex-grow 属性定义弹性盒子项（flex item）的拉伸因子。
- flex-shrink 属性指定了 flex 元素的收缩规则
默认值为1
- flex-basis： 指定了 flex 元素在主轴方向上的初始大小
默认值 ：auto 不可继承
注意：在flex简写属性中 flex-basis的默认值为0，当他没有设置时，可用width来代替。
- flex-grow：可用空间 = (容器大小 - 所有相邻项目flex-basis的总和)
可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)
每项伸缩大小 = (伸缩基准值 + (可扩展空间 x flex-grow值))
- flex-shrink：
每项flex收缩大小 = 伸展基准值 - (收缩比例 / 收缩比例总和 x 溢出的空间)–>(这是错误的)

1.计算收缩因子与基准值乘的总和
2.计算收缩因数
收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和
3.移除空间的计算
移除空间= 项目收缩因数 x 负溢出的空间
- flex 是 flex-grow，flex-shrink，flex-basis 的简写属性
默认值flex-grow: 0 不可继承
flex-shrink: 1
flex-basis: auto
值
flex: none;/* 0 0 auto */
flex：1;
- 在实际的开发环境中，我们要兼顾老版本和新版本。常将老版本的写在上面。

display:-webkit-box;
display:flex;
//将富裕空间按比例的分配给每个项目上
width:0px;
-webkit-box-flex:1;
flex:1;