HTML flex 布局

/* 开启flex布局*/
display: flex
//使用方法
 /*主轴方向*/
 flex-direction: row;
 flex-direction: row-reverse;
 flex-direction: column;
 flex-direction: column-reverse;

/*主轴上 子项 对齐方式*/
                justify-content: center;
                justify-content: flex-start;
                justify-content: flex-end;
                justify-content: space-between; 
                justify-content: space-around;
                justify-content: space-evenly;
/*测轴对齐方式*/
                align-items: stretch;
                align-items: flex-start;
                align-items: flex-end;
                align-items: center;
                align-items: baseline;
              
  /*主轴上的子项是否换行*/
                flex-wrap: nowrap;
                flex-wrap: wrap;
              
  /*作用于多行*/
  
                align-content: flex-start;
                align-content: flex-end;
                align-content: center;