css flex cheat sheet

 

.container{

    display: -webkit-flex/inline-flex;

    display: -moz-flex/inline-flex;

    display: -ms-flex/inline-flex;

    display: flex/inline-flex;

}

让元素以flex形式渲染

flex=block

inline-flex=inline-block

 

flex-direction: row/row-reverse/column/column-reverse;

定义主轴方向

row=从左至右（默认值）

column=从上到下

 

flex-wrap: nowrap/wrap/wrap-inverse

 定义侧轴方向

nowrap=不换行（默认值）

wrap=换行，换行方向与文字排列方向一致

wrap-inverse=与文字排列方向相反

 

flex-flow: row wrap;

 同时定义主轴和侧轴

 

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

单行内，主轴方向对齐方式

space-between=为元素中间用空白填充

space-around=则在space-between的基础上，开头和结尾元素都留出空白

 

align-items: flex-start/flex-end/center/baseling/stretch;

单行内，各个元素之间的侧轴方向对齐方式

其中stretch，拉伸元素填满整行

 

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

多行内容之间，行与行的侧轴对齐方式

 

---

 

 以下针对于单一元素进行设定

align-self

 覆盖父容器的align-items的设定值，针对单一元素进行设置。

 

order: <integer>

设定元素的排列顺序

 

flex:  none | initial | auto | [flex-grow flex-shrink || flex-basis] | initial | auto;

initial=在有剩余空间的情况下不会有任何变化，但是在必要的情况下会被收缩

auto=会根据主轴自动伸缩以占用所有剩余空间，非常类似于普通流中的自动外边距

flex-grow=扩展比率。容器空间大于元素所需控件之和的情况下，根据元素的设定值来扩大元素大小以填充剩余空间。0不参与空间分配。

flex-shrink=收缩比率。容器空间小于元素所需空间之和的情况下。根据元素的设定值缩小元素以适应容器大小。0不参与空间分配。

flex-basis=伸缩基准值。各个元素按此值主张自己的大小，容器满足个元素主张大小后：如果有剩余的空间，则按照flex-grow分配剩余大小；如果空间不足以放下所有元素，则差值部分按照flex-shrink缩小各个元素。*此处主张的大小指的是元素的宽和高，如果元素的box-sizing为默认值（content-box），则计算剩余空间或需收缩空间之前要减去padding和border-width。