伸缩布局

• 设置父元素为伸缩盒子, (直接父元素)

• 为什么伸缩盒子子元素在一行上显示?

  1. 子元素是按照伸缩盒子主轴方向显示
  2. 只有伸缩盒子才有主轴和侧轴
  3. 主轴默认水平, 从左向右显示
  4. 侧轴始终垂直于主轴

• 设置盒子主轴方向 (flex-direction)

  1. flex-direction:row;(默认值)
  2. flex-direction:row-reverse;
  3. flex-direction:column;
  4. flex-direction:column-reverse;

• 设置元素在主轴的对齐方式(justify-content)

  1. justify-content: flex-start;
  2. justify-content: flex-end;
  3. justify-content: center;
  4. justify-content: space-between;
  5. justify-content: space-around;

• 设置元素在侧轴的对齐方式(align-items)

  1. align-items: flex-start;
  2. align-items: flex-end;
  3. align-items: center;
  4. align-items: stretch;(默认值)

• 设置元素是否换行显示(flex-wrap)

  1. 在伸缩盒子中所有的元素默认都会在一行上显示
  2. 如果希望换行：
     flex-wrap: wrap | nowrap;

• 设置元素换行后的对齐方式（ align-content）

  1. align-content: flex-start;
  2. align-content: flex-end;
  3. align-content: center;
  4. align-content: space-around;
  5. align-content: space-between;
  6. align-content: stretch;(换行后的默认值)

• 子元素中的属性

  1. flex:1(数值) 代表子元素在主轴方向所占的比例, 权重
  2. order:1(数值) 改变子元素排列顺序