flex
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 阮一峰老师详解
box
- 用于父元素的样式:
display: box; 该属性会
将此元素及其直系子代加入弹性框模型中。(Flexbox 模型只适用于直系子代)box-orient:
horizontal
|vertical
|inherit;
该属性定义父元素
的子元素是如何排列的。box-pack:
start
|end
|center
|justify;
设置沿box-orient
轴的父元素中子元素的排列方式。因此,如果box-orient
是水平方向,则父元素的子元素是水平的排列方式,反之亦然。(表示父容器里面子容器的水平对齐方式--垂直排列时--定宽)box-align:
start
|end
|center
|baseline
|stretch;
基本上而言是box-pack
的同级属性。设置框的子代在框中的排列方式。如果方向是水平的,该属性就会决定垂直排列,反之亦然。(表示父容器里面子容器的垂直对齐方式--水平排列时--定高)
- 用于子元素的样式:
- box-flex: 0 | 任意数字; 该属性让子容器针对父容器的宽度按一定规则进行划分。
1.box+flexbox
display: -webkit-box;
display: -moz-box;
display: -ms-box;
display: -webkit-flex;
display: -ms-flex;
display: flex;
2.定义子元素排列方式
/*垂直排列*/ -webkit-box-orient:vertical; -webkit-box-direction:normal; -moz-box-orient:vertical; -moz-box-direction:normal; -webkit-flex-direction:column; /*flexbox下竖向排列*/ -ms-flex-direction:column; flex-direction: column;
/*换行处理*/ -webkit-box-lines: multiple; -ms-box-lines:multiple ; -moz-box-lines:multiple; /*实验性质*/ -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap;
/*对齐方式*/ -webkit-box-pack: center; -moz-box-pack: center; -ms-box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center;
-0-竖向排列box-align,flex:align-items
-0-伸缩性 box-flex
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;