flex布局学习记录

推荐阮一峰写的flex布局博客,这里我只是说下自己的学习记录.
flex布局可以实现响应式布局.
兼容性:

实现flex布局,要有父容器和子元素.
将父容器设置为display:flex.
父容器设置为display:flex之后，它的子元素的float,clear,vertical-align属性将失效。
flex容器有两个轴，一条为主轴，一条为交叉轴，主轴和交叉轴与x,y轴类似.

这里只说我常用的属性:
一般情况下会这样设置容器的属性:
flex-flow:row no-wrap; ,这条为缩写属性，row代表从左向右排列.no-wrap表示不换行.
justify-content: flex-start; 这条属性表示主轴上的对齐方式.
align-items:flex-start; 这条属性表示交叉轴上的对齐方式.

子元素上的属性:
order: 0； 这条属性表示项目的排列顺序，子元素将会按order的值从小到大按顺序排列,默认值为0.如果将某个子元素的order属性设为-1，则这个子元素排在第一位.
flex-grow；表示子元素的放大比例.默认为0，表示如果存在多余空间，子元素也不会放大.
flex-shrink;表示子元素的缩小比例，默认为1，表示如果容器空间变小时，子元素也会按比例缩小，如果某个子元素设置为0，则其他子元素会缩小，这个子元素不会缩小.
flex-basis;一般不需要设置，默认值为auto.
flex；是flex-grow flex-shrink flex-basis3个属性的缩写，默认值为0，1，auto.我一般设置为flex:1，等同于flex:auto（flex:1 1 auto）;

我就记录自己常用的属性，不常用的属性我觉得没必要记录。