弹性布局

 

 

•  基本概念

容器：采用flex布局的元素（flex container)

项目：需要布局的元素，容器成员子元素(flex item)

主轴：默认水平方向，项目按主轴排列（main axis)

交叉轴：与主轴交叉（cross axis）

 

注：主轴不一定为水平方向，若项目按照垂直方向排列，主轴为垂直方向。

 

• 容器属性设置

display:flex;    指定使用flex布局

 

flex-dicretion:row | row-reverse | column | column-reverse;     定义主轴方向

 

 

flex-wrap: nowrap | wrap | wrap-reverse;    定义换行

 

 

 

 

 

 

 

flex-flow      flex-dicretion和flex-flow的简写，默认值是row nowrap

 

justify-content : flex-start | flex-end | center | space-between | space-around       定义项目在主轴上的对齐方式

  

 

 

 

 

 

 

 

 

align-items：flex-start | flex-end | center | baseline | stretch     项目(单行)在交叉轴的对齐方式，项目高度要设置否则会填充容器高度

 

 

 

 

 

 

 

align-content: flex-start | flex-end | center | space-between | space-around | stretch      项目(多行，整体)在交叉轴的对齐方式

 

• 项目属性设置

order       项目的排列顺序。数值越小，排列越靠前，默认为0

 

 

flex-grow  放大     默认0  存在剩余空间也不放大

 

 

flex-shrink 缩小     默认1  剩余空间不足将会缩小

 

 

align-self: auto | flex-start | flex-end | center | baseline | stretch;    定义与其他项目不一样的对齐方式，可覆盖align-items。默认auto，继承align-items；没有父元素等同于stretch。

 

flex-basis：auto |  <length>;           项目有占据的主轴空间(设置了本身width或者height会失效）

 

flex               flex-grow、flex-shrink和flex-basis的简写，默认值0 1 auto

 

 

 

 

 

参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html