flex布局详解

1.flex 布局  盒子都要加上  display: flex 属性   // Webkit 内核的浏览器，必须加上-webkit前缀
.box{
  display: flex;
}
2.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属性定义，如果一条轴线排不下，如何换行    nowrap | wrap | wrap-reverse;

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

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

5.  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;