CSS3之flex常用属性

父元素容器的属性

/* 设为flex布局以后，子元素的float、clear和vertical-align属性将失效 */
display: flex;

/* 
决定主轴的方向（即项目的排列方向）
row：默认值。灵活的项目将水平显示，正如一个行一样。
row-reverse：与row相同，但是以相反的顺序。
column：灵活的项目将垂直显示，正如一个列一样。
column-reverse：与column相同，但是以相反的顺序。
*/
flex-direction: row;

/* 
是否换行
nowrap：默认值。规定灵活的项目不拆行或不拆列。
wrap：规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse：规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
*/
flex-wrap: nowrap;

/* 
定义水平方向对齐方式
flex-start：默认值。从行首起始位置开始排列。
flex-end：从行尾位置开始排列。
center：居中排列。
space-between：均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点。
space-evenly：均匀排列每个元素，每个元素之间的间隔相等。
space-around：均匀排列每个元素，每个元素周围分配相同的空间。
*/
justify-content: flex-start;

/* 
定义垂直方向对齐方式
stretch：默认值。元素被拉伸以适应容器。
center：元素位于容器的中心。
flex-start：元素位于容器的开头。
flex-end：元素位于容器的结尾。
baseline：元素位于容器的基线上。
*/
align-items: stretch;

/* 
定义多个轴线（多行/多列）对齐方式
stretch：默认值。元素被拉伸以适应容器。
center：元素位于容器的中心。
flex-start：元素位于容器的开头。
flex-end：元素位于容器的结尾。
space-between：元素位于各行之间留有空白的容器内。
space-around：元素位于各行之前、之间、之后都留有空白的容器内。
*/
align-content: stretch;

子元素容器的属性

/* 定义子元素的排列顺序，默认为0 */
order: 1;

/* 定义子元素的放大比例，默认为0 */
flex-grow: 1;

/* 定义子元素的缩小比例，默认为1 */
flex-shrink: 0;

/* 定义在分配多余空间之前，项目占据的主轴空间，默认为auto */
flex-basis: 100px;

/* flex-grow，flex-shrink，flex-basis的简写 */
flex: 0 1 auto;