第二十九章 CSS3弹性伸缩布局【下】
一、新版本 （可以让心浏览器全面兼容，在未来浏览器更新换代中实现统一）
首先，设置伸缩盒的display有如下两个属性
（1）flex 将容器盒模型作为块级弹性伸缩盒显示（新版本）
（2）inline-flex 将容器盒模型作为内联级弹性伸缩盒显示（新版本）
//大部分不需要前缀
div{
display：flex；
}
属性 IE Firefox Chrome Opera Safari
支持需带前缀 无 无 21～28 无 7.0
支持不带前缀 11+ 20+ 29+ 12.1 无
从这张表可以看出，只有webkit引擎浏览器Chrome和Safari的版本需要添加-webkit-,而Chrome浏览器29版本以后就可以省略了
************************
*和混合版本内容基本一样*
************************
1、flex-direction 属性和旧版本box-orient属性一样，都是设置伸缩项目的排列方式
//设置从上往下排列
div{
-ms-flex-direction:column
}
(1)row 设置从左到右排列
(2)row-reverse 设置从右到左排列
(3)column 设置从上到下排列
(4)column-reverse 设置从下到上排列
2、flex-wrap
//设置无法容纳时，自动换行
div{
-ms-flex-wrap：wrap；
}
(1)nowrap 默认值，都在一行或一列显示
* (2)wrap 伸缩项目无法容纳时，自动换行
(3)wrap-reverse 伸缩项目无法容纳时，自动换行，方向和wrap相反
3、flex-flow 属性是集合了排列方向和控制换行的简写形式
//简写形式
div{
-ms-flex-flow：row wrap；
}
4、justify-content 属性和旧版本中的box-pack一样，设置伸缩项目的对齐方式
//按照中心对齐
div{
justity-content:space-around;
}
(1)flex-start 伸缩项目以起始点靠齐
(2)flex-end 伸缩项目以结束点靠齐
(3)center 伸缩项目以中心点靠齐
(4)space-between 伸缩项目平局分布
(5)space-around 同上，但两端保留一半空间
5、align-items 属性和旧版本box-align一样，处理伸缩项目的额外空间
//处理额外空间
div{
-moz-box-align:center;
}
(1)flex-start 伸缩项目以顶部为基准，清理下部额外空间
(2)flex-end 伸缩项目以底部为基准，清理上部额外空间
(3)center 伸缩项目以中部为基准，平均清理上下部恩爱空间
(4)baseline 伸缩项目以基线为基准，清理额外空间
(5)stretch 伸缩项目填充整个容器，默认
6、align-self 和align-items一样，都是清理额外空间，但是他单独设置摸一个伸缩项目，所有的值和align-itmes一致
//单独清理额外空间
p:nth-child（2）{
align-self:center；
}
7、flex 属性和旧版本中的box-flex类似，用来控制伸缩容器的比例分配
//设置比例分配
p:nth-child(1){
flex：1；
}
p:nth-child(2){
flex：3；
}
p:nth-child(3){
flex：1；
}
8、order 属性和 box-ordinal-group 属性一样控制伸缩项目出现顺序
//设置伸缩项目顺序
p:nth-child(1){
flex：1
order：3；
}
p:nth-child(2){
flex：3；
order：2；
}
p:nth-child(3){
flex：1；
order：1；
}
原文地址：https://www.cnblogs.com/keshuai752100461/p/8485245.html