第二章flex布局

 1、代碼規範

2、所謂布局

3、flex容器将消除item的塊狀特性

     flex彈性盒子

4、flex-direction的應用

.container{
  display: flex;
  flex-direction: row;
}
           

5、reverse倒序排布

/* width 100%  height:自适應的  */
.container{
  display: flex;
  flex-direction: row-reverse;
}
           

6、  justify-content屬性

.container{
  display: flex;
  flex-direction: row-reverse;

  /* 
  justify-content: center;
  justify-content: space-between; 
  justify-content: space-around;
 */
  justify-content: flex-end;
}
           

7、主軸與交叉軸

.container{
  height:400px ;
  display: flex;
  /* 值為 column 豎直方向為主軸 row 水準方向為主軸  */
  flex-direction: column;
  /* 交叉軸上的單對齊 */
  align-items:center;
  /* 主軸上的對齊 */
  justify-content: center;
}