flex布局

给父元素设置 display:flex;     

1.flex-direction :   row row-reverse column column-reverse(父元素属性)

 

2. justify-content     flex-start  center flex-end (左  中   有 （1，2，3）)

 

 

3.

/* 当所有子项目的总宽度大于父元素的宽度的时候，子项目会均分父元素的宽度 */

    flex-wrap: wrap;  /* 保持子元素原本的宽度*/

4. align-items: flex-start     center     flex-end   (上  中   下)   stretch（单行）

 

stretch：拉伸，用这个的时候子盒子不要给高度。设置这个属性后盒子会沿着侧轴拉伸

5.align-content 多行

6.flex-flow是flex-direction + flex-wrap的复合属性

子项常见属性(设置子元素)

 1.flex:number

2.align-self

/* align-self:auto;  默认值，表示继承父元素align-items align-items */

    align-self: flex-start center flex-end  

3.

order属性定义项目的排列顺序

数值越小，排列越靠前，默认为0.