移动web布局方式

flex布局

主侧轴对齐方式

• 主轴

  • justify-content

    • center：居中
    • space-between：间距出现在弹性盒子之间
    • space-evenly：父子级间距都相等
    • space-around：间距出现在弹性盒子两侧

• 侧轴

  • align-items（控制所有弹性盒子）

    • center：居中
    • stretch：默认值：拉伸

  • align-self（控制某个弹性盒子）

改变主侧轴的方式

• flex-direction: row

  • 默认值

• flex-direction: column

  • 主轴方向变成了从上到下 侧轴从左到右

弹性伸缩比

• flex：整数；
• 占用父级剩余尺寸的份数