“`” 参考回答：
文章链接：
<a class=""url"" href=""http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool"" target=""_blank"">http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool</a>（语法篇）
简单的分为容器属性和元素属性
容器的属性：
flex-direction：决定主轴的方向（即子item的排列方法）
<pre><code>.box {
flex-direction: row | row-reverse | column | column-reverse;
}
</code></pre>
flex-wrap：决定换行规则
<pre><code>.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
flex-flow：
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
</code></pre>
justify-content：对其方式，水平主轴对齐方式
align-items：对齐方式，竖直轴线方向
项目的属性（元素的属性）：
order属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为0
flex-grow属性：定义项目的放大比例，即使存在空间，也不会放大
flex-shrink属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果定义个item的flow-shrink为0，则为不缩小
flex-basis属性：定义了在分配多余的空间，项目占据的空间。
flex：是flex-grow和flex-shrink、flex-basis的简写，默认值为0 1 auto。
align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖align-items，默认属性为auto，表示继承父元素的align-items
比如说，用flex实现圣杯布局
<pre><code> "“`
Was this helpful?
0 /
0