引言

本文主要对css flexbox的关键点了总结，方便以后在以后的查阅。

容器的属性

对于容器需要指定其显示方式为flexbox

display: flex;

指定flex排列的方向、在排列时是否会换行，使用 flex-flow 可以快速设置二者属性

flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <'flex-direction'> || <'flex-wrap'>;

用于调整主轴方向的排布（对于 row 来说就是横向，对于 column 来说就是纵向）

justify-content: flex-start | flex-end | center
	       | space-between | space-around | space-evenly;

用于调整相交轴方向的行间排布（对于 row 来说就是纵向，对于 column 来说就是横向）

align-content: flex-start | flex-end | center
	     | stretch | space-between | space-around;

用于调整相交交轴方向的单行对齐方式。需要注意的是其中 center 和 baseline 的区别： 二者都表示居中，而 baseline 会保证所有文字的底边处在同一条线上。

align-items: flex-start | flex-end | center | baseline | stretch;

条目的属性

用于调整顺序

order: <integer>; /* default 0 */

用于调整每个条目的伸展程度

flex-grow: <number>; /* default 0 */

用于调整每个条目的缩小程度

flex-shrink: <number>; /* default 1 */

用于调整每个条目的默认尺寸

flex-basis: <length> | auto; /* default auto */

设置flex属性，排列顺序为 flex-grow , flex-shrink , flex-basis

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];

用于重载容器的 align-items 的设置

align-self: auto | flex-start | flex-end | center | baseline | stretch;