flex布局具体的属性字段和属性值

刚刚参加了一次秋招的笔试，其中有一道题目就是要我写出flex的字段和属性值以及他们的作用。这个问题反映了我最近积累知识之后消化不良！！请大家万分注意消化的问题。

具体的flex布局的知识我就不班门弄斧了，学习的来源也是阮一峰老师的博客，在此附上链接

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

1. 父元素的属性字段

父元素的属性字段

flex-direction	定义flex的主轴方向
flex-wrap	定义项目（子元素）在主轴方向上的换行方式
justify-content	定义主轴方向上项目的对齐方式
align-items	定义项目在交叉轴的对齐方式
align-content	定义了多根轴线的对齐方式
flex-flow	flex-direction和flex-wrap属性的缩写

 

• flex-direction：主轴的方向，默认为从左往右

row（默认）	将主轴方向定义为水平从左到右
row-reverse	将主轴方向定义为水平从右往左
column	将主轴方向定义为垂直从上往下
column-reverse	将主轴方向定义为垂直从下往上

• flex-wrap：项目排列是否换行

no-wrap（默认）	主轴方向上所有项目排列不下时也不换行
wrap	换行，但原先排满的那行在上面
wrap-reverse	换行，但原先排满的那行在下面

• justify-content：主轴方向上项目排列方式

flex-start（默认）	轴线起点方向对齐
center	居中显示
flex-end	轴线终点方向对齐
space-around	项目左右两端空白相等
space-between	将空白均匀分布在项目的中间，也就是两端的项目分别靠着终点和起点

• align-items：交叉轴上项目排列的方式

stretch（默认）	项目在交叉轴上布满了全部空间
flex-start	项目在交叉轴上向起点对齐
center	项目在交叉轴上居中显示
flex-end	项目在交叉轴上向终点对齐
baseline	项目在交叉轴上以基线对齐

• align-content：多根轴线时的对齐方式，单轴线无效

flex-start	多根轴线向主轴起点方向靠拢
center	多根轴线居中显示
flex-end	多根轴线向主轴终点方向靠拢
space-around	多根轴线两端的空白分布相同
space-between	空白部分分布在多根轴线的中间（均匀）
stretch（默认）	轴线占满整个父元素

• flex-flow：flex-direction和flex-wrap的组合

2.项目的属性字段

order	排列的优先级，值越小排列越靠前
flex-grow	排列完项目还有剩余空间时，项目放大的比例 （该项目占所有的grow值的比例，shrink也是）
flex-shrink	项目排列时候发现空间不够，项目缩小的比例
flex-basis	在分配多余空间之前，指定项目占据的空间 默认为auto，但可以写入具体的宽高
aling-self	指定项目自己交叉轴上的对齐方式 相较于align-items，它多了个默认值auto
flex	flex-grow和flex-shrink和flex-basis属性的简写 默认为0，1，auto