[TOC] >参考阮一峰[网址](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html) ## 主轴属性 6个属性在容器上 ``` flex-direction [ row(默认) | row-reverse | column | column-reverse]; flex-wrap [nowrap(默认) | wrap | wrap-reverse(第一行下面)] 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 | baseline | stretch] ``` **align-items 项目在交叉轴上如何对齐**  > stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 **align-content 多轴对齐方式**  ## 项目属性 6个属性在项目上 ``` order 默认为0,排列顺序。数值越小，排列越靠前 flex-grow item的放大比例，默认0(即存在空间也不放大)如item1 为1 ，item2 为2，则item2为item1的两倍宽 flex-shrink 默认为1,item的缩小比例,为0则表示不缩小 flex-basis align-self 定义单个项目的对齐方式 ``` **flex-grow** - flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 - 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。  **flex-basis** - `flex-basis`属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为`auto`，即项目的本来大小。 - 它可以设为跟`width`或`height`属性一样的值（比如350px），则**项目将占据固定空间**。 **align-self** `align-self`属性允许单个项目有与其他项目不一样的对齐方式，可覆盖`align-items`属性  ## 实例 ### 水平垂直居中显示 ``` display:flex; align-items:center; //水平对齐 justify-content:center; // 居中对齐 ``` ### 行对齐，1一个元素固定，另一个元素填充剩余空间 ``` .parent{ display:flex; flex-direction:row; .item1{ with:20px; flex-grow:0; // 默认为0 } .item2{ flex-grow:1; // 默认为1 } } ```