详解flex布局1

横向排列：

/* 父元素 */
.flex{
  display: flex;
  flex-direction: row-reverse; /* 倒序横排 */
  
  /* 水平对齐 */
  align-items: stretch; /* 子元素拉伸成行高 */
  align-items: flex-start; /* 子元素顶端对齐 */
  align-items: flex-end; /* 子元素底部对齐 */
  align-items: center; /* 子元素中间对齐 */

  /* 垂直对齐 */
  justify-content: flex-start; /* 左对齐 */
  justify-content: flex-end; /* 右对齐 */
  justify-content: center; /* 中间对齐 */
  justify-content: space-between; /* 两端对齐 */
  justify-content: space-around; /* 中间间距是首尾的两倍 */
  justify-content: space-evenly; /* 平均分配空间 */
    
  flex-wrap: wrap; /* 允许换行 */

  /* 多行对齐 */
  align-content: flex-start; /* 居上对齐 */
  align-content: flex-end; /* 居下对齐 */    
}

 
/* 子元素*/
.item{
    flex-basis: 60px; /* 基础宽度 */
    flex-grow: 1;  /* 在自身宽度的基础上，平分剩余宽度 */
     
}
/* 子元素单独设定 */
.item:first-child{
    flex-grow: 1;  /* 占满剩余宽度 */
  order: 1; /* 顺序 */
   flex-grow: 6; /* 单独设置元素1的宽度 */
}

竖向排列：

flex-direction: column;/* 竖排 */
flex-direction: column-reverse; /* 倒序竖排 */