关于flex属性

flex

在不设置长度的前提下，所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容

设为flex布局之后，子元素的float,clear,vertical-align属性会失效

属性

容器的属性

• flex-direction
  决定项目的排列方向，会存在四个值
  row(默认值)主轴为水平方向，按顺序把第一个盒子从左往右排
  

row-reverse:主轴为水平方向 ,按顺序把第一个盒子从右往左排

column :主轴为纵向，把第一个盒子从上往下按顺序排列

column-reverse：主轴为纵向，把第一个盒子从下往上按顺序排列

方向为纵向时，子元素不设置宽度时，宽度默认为父元素的宽度

• flex-wrap
  决定当子元素的盒子排不下的换行问题，可能取三个值

nowrap(默认)：不换行，若子元素的宽度太大，会自行压缩减小子元素的宽度
wrap：换行,另一行从下一行开始

wrap-reverse：换行，另一行从上一行开始

• flex-flow
  是flex-direction和flex-wrap的简写属性

• justify-content
  定义了子元素在主轴上面的对齐方式
  flex-start(默认值):左对齐
  flex-end:右对齐
  flex-center:居中(子元素之间的间隔不会改变)
  

space-between:两端对齐，中间盒子的距离相等

space-around:每个子元素两侧的间隔相等，类似于设置左右margin的效果，因为是两边距离，所以

• align-items
  定义子元素在交叉轴(纵轴)上的对齐方式

flex-start:从交叉轴的起点对齐

flex-end:从交叉轴的终点对齐

center:从交叉轴的中点对齐

stretch(默认值):若未设置高度或高度auto会将整个容器占满
baseline:从项目的第一行文字的基线对齐

• align-content
  定义了多根轴线(就是指子元素所占行数)的对齐方式

flex-start,flex-end,center,space-between,space-around,这些属性和justify-content里面的属性一样，就是方向变为纵向，当然，纵向轴线的排列方式不会影响横向盒子的间隔
strech(默认值)：轴线占满整个交叉轴(纵轴)

子元素的属性

• order
  定义子元素的排列顺序，数值越小，排列越靠前

• flex-grow
  定义子元素的放大比例，默认为0(表示即便存在剩余空间也不会放大)，属性值为1表示相对于其他子元素进行扩展的量，大于1时是相对于属性值为1的等比放大
  

1,4,5属性值均默认为0

• flex-shrink
  定义了子元素的缩小比例，当空间不足(即宽度占满不能换行)时会将该属性大的元素进行缩小
  

1,4,5属性值均默认为1

• flex-basis
  定义了在分配空间的时候，子元素的宽度，就相当于设置宽度
  两个属性值auto(表示宽度由内容决定)和XXpx

• flex
  简写属性，包括了：flex-grow,flex-shrink和flex-basis

• align-self
  允许单个子元素与其他子元素有不一样的对齐方式，可以覆盖align-items属性，默认值为auto(表示继承父元素的align-items的属性值，没有父元素等于stretch，即高度占满父元素)，其他的属性值和align-items的一样
  

给container设置了align-items:center;1号设置了align-self:flex-start;5号设置了align-self:flex-end;

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