第二章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;
}

 

 

 

 

 

 

 

 

 

来源：CSDN

作者：星哲最开心

链接：https://blog.csdn.net/github_36665118/article/details/103749287