CSS布局flex布局常用属性

display: flex 使用 flex 布局首先要设置父容器；

水平方向：

     justify-content: flex-start;起始端对齐
 
     justify-content: flex-end;末尾段对齐
 
     justify-content: center;居中对齐
 
     justify-content: space-around;均匀分布
 
     justify-content: space-between;两端对齐，中间均匀分布

垂直方向：

     align-items:flex-start; 起始端对齐
 
     align-items:flex-end; 末尾端对齐
 
     align-items:center; 居中对齐
 
     align-items:baseline; 基线对齐，这里的baseline默认是指首行文字
 
     align-items:stretch; 子容器沿交叉轴方向的尺寸拉伸至与父容器一致。

使用 flex 布局首先要设置父容器display: flex，然后再设置justify-content: center实现水平居中，最后设置align-items: center实现垂直居中。

#box{
    
    
  display: flex;
  justify-content: center;
  align-items: center
}