弹性盒使用笔记

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
一,适用于：弹性盒容器

1. flex-direction属性：决定主轴的方向（即项目的排列方向）;

• row（默认值）：主轴为水平方向，起点在左端；
• row-reverse：主轴为水平方向，起点在右端；
• column：主轴为垂直方向，起点在上沿；
• column-reverse：主轴为垂直方向，起点在下沿
  

2. flex-wrap属性：规定如果一条轴线排不下，如何换行；

• nowrap（默认）：不换行； 父元素宽度不够将子元素宽度进行删减;
• wrap：换行，第一行在上方；
• wrap-reverse：换行，第一行在下方
  

3. flex-flow属性：是flex-direction属性和flex-wrap属性的简写形式，默认值为row/nowrap；
   flex-flow属性： 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
4. justify-content属性：定义了项目在主轴上的对齐方式；

• flex-start（默认值）：左对齐；
• flex-end：右对齐；
• center： 居中；
• space-between：两端对齐，项目之间的间隔都相等；
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
  

5. align-items属性：定义项目在侧轴上对齐方式；

• flex-start：交叉轴的起点对齐；
• flex-end：交叉轴的终点对齐；
• center：与交叉轴的中点对齐；
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布；
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍；
• stretch（默认值）：轴线占满整个交叉轴。
  6.align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
• flex-start：交叉轴的起点对齐；
• flex-end：交叉轴的终点对齐；
• center：与交叉轴的中点对齐；
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布；
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍；
• stretch（默认值）：轴线占满整个交叉轴。
  

二,适用于弹性盒模型子元素
0.flex的取值介绍 flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
none：none关键字的计算值为: 0 0 auto
[ flex-grow ]：定义弹性盒子元素的扩展比率。(多出来的空间按比例分配给子元素)
[ flex-shrink ]：定义弹性盒子元素的收缩比率。
[ flex-basis ]：定义弹性盒子元素的默认基准值。

1.align-self的取值介绍 用于设置弹性元素自身在侧轴方向的对齐方式;
auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

2.order的具体语法
order： 用整数值来定义排列顺序，数值小的排在前面。可以为负值。
3.flex-grow的具体语法
flex-grow：根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间,不允许负值