flex布局2

45 阅读1分钟

flex布局2

  • :justify-content:主轴对齐方式;
  • flex-start 起始位置
  • center 居中
  • flex-end 结束位置
  • space-between 两端对齐space-around两端平分space -evenly 平均分配
  • 6:align-items:侧轴对齐方式;
  • flex-start起始位置
  • center居中
  • flex-end 结束位置stretch拉伸(默认值)baseline文本底部对齐
  • 7: align-content:多根侧轴对齐方式;
  • flex-start 起始位置
  • center居中
  • flex-end 结束位置
  • space-between两端对齐space-around两端平分space-evenly 平均分配stretch拉伸(默认值)
  • 【注】必须换行的元素才能使用
  • 项目属性:(给自己设置,控制自己)
  • 1: align-self:侧轴对齐方式;
  • flex-start开始位置
  • center居中
  • flex-end 结束位置stretch 拉伸
  • auto 默认值(跟随父元素的align-items的值一致)