CSS Flex 布局

容器 (Container)

列 (Item)

https://zhuanlan.zhihu.com/p/25303493

<div id="container" > /*容器*/
	<div id="item1" /> /*列*/
	<div id="item2" />
</div>

container的样式

<style>
#container { /*容器的css*/
display: flex;
display: -webkit-flex; /* Safari */

/* 列的方向
row 			默认从左到右
row-reverse 	从右到走
column 			从上到下
column-reverse 	从下到上
 */
flex-direction: row | row-reverse | column | column-reverse;

/* 列是否可以换行
nowrap 			不换行，多余会隐藏
wrap 			换行，自动挤压到下一行
wrap-reverse 	换行，自动将上一行挤压到下一行
*/
flex-wrap: nowrap | wrap | wrap-reverse;

/* flex-direction和flex-wrap的简写
row nowrap
*/
flex-flow: <flex-direction> || <flex-wrap>;

/* 列的左右对齐方式（flex-direction: row）
flex-start 		左对齐
flex-end 		右对齐
center 			居中
space-between	两端对齐
space-around	每列间隔相等(最左边和最右边只有半个间隔)
*/
justify-content: flex-start | flex-end | center | space-between | space-around;

/* 列的上下对齐方式（flex-direction: row）
stretch			自适应，容器的高度就是列的高度
flex-start 		顶部对齐
flex-end 		底部对齐
center 			上下居中对齐
baseline		居于第一个item的文字基线对齐
*/
align-items: stretch | flex-start | flex-end | center | baseline;

/* 列的上下对齐方式（多轴，也就是有了换行）(flex-direction: row, flex-wrap: wrap)
stretch 		自适应，平分容器的高度，平分后的高度就是列的高度
flex-start		顶部对齐，往下排
flex-end 		底部对齐，往上排
center			中间对齐，往下排
space-between	上下两端对齐
space-around	每列间隔相等(最上和最下边只有半个间隔)
*/
align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

item的样式

#item1 { /*列的css*/
/* 排序值 asc（升序，从小到大）
*/
order: <integer> ;

/* 列的放大比例
*/
flex-grow: <number>;

/* 列的缩小比例
*/
flex-shrink: <number>;

/* 列占容器的大小 (配合flex-grow和flex-shrink使用)
auto 			自适应
<length>		大小
*/
flex-basis: auto | <length>;

/* flex-grow,flex-shrink,flex-basis的简写
*/
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];

/* 覆盖容器属性align-items
参数见容器的align-items
*/
align-self: auto | stretch | flex-start | flex-end | center | baseline;
}
</style>