伸缩布局

• display: flex （父盒子设置为弹性布局）

• flex-direction: column (调整主轴方向)

• justify-content: space-around（调整主轴方向上每个item的排列方式）

• align-items

  • 调整侧轴方向上单独行中item的对齐方式，是跟justify-content相对应的属性
  • strech为自动拉伸，这种情况下必须子元素没有设置高度，会根据父元素高度拉伸）

• flex-wrap （是否需要换行，如果不需要换行，一旦超出父元素，子元素的宽会被忽略，根据情况自动调整变小）

• align-content（==多行的情况下才起作用==，也就是必须设置成可换行==flex-wrap: wrap==，用于调整列与列之间的间距）

• align-self (设置在子元素上，用于脱离父元素align-items的控制，可以单独设置某个子元素的排列方式)

• flex （设置子元素的分配比例，待分配的子元素是未设置宽度的，分配的大小是父盒子减去padding、固定宽度子元素后，剩下的部分给未设置宽度的子元素自动分配）

• order (值越大的，排在越后面)