flex布局详解

1.flex 布局  盒子都要加上  display: flex 属性   // Webkit 内核的浏览器，必须加上-webkit前缀
.box{
  display: flex;
}
-webkit
flex-direction   

row 
| row-reverse | column | column-reverse;

.box {
  flex-direction: row ； 子盒子 横向左到右顺序排列
}

.box {
  flex-direction:
row-reverse
； 子盒子 横向右到左顺序排列 

}

.box {
  flex-direction:
column 

}

.box {
  flex-direction:
column-
reverse

}

3. 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行    
flex-wrap
nowrap | wrap | wrap-reverse;

.box{
  flex-wrap: nowrap 默认不换行          | wrap  换行排满第一行 一次排列 | wrap-reverse; 换行 第一行不排满
}

4.  flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

5.  justify-content属性定义了项目在主轴上的对齐方式
flex-flow
flex-direction
flex-wrap
row nowrap

justify-content
flex-start | flex-end | center | space-between | space-around

 

 6.   align-items属性定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

 

 

flex布局 盒子 水平垂直居中   
。box{

  　　　display: flex;

            align-items: center;

            justify-content: center;