flex布局

容器属性

• align-content
  • 该属性可选值与justify-content一样,区别是justify-content控制的是一根主轴的情况(一行),align-content控制的是多根主轴的情况
    • 使用该属性的容器必须有多行子元素
    • 必须允许换行(flex-wrap:wrap)
    • 该属性是负责容器内所有轴垂直排列
    • 当flex-direction为column时 该属性负责所有轴的横向排列
      - 和把元素竖起来排列不同的是,该属性可以在管理竖向排列的同时管理每行多个元素横向排列,这是column排列做不到的
      - 可以和align-items属性配合使用做到内容单行，多行不同布局
• justify-content
  • 横向排列子元素 作用在每行的每根纵轴上
• align-items
  • 纵向排列子元素 作用在每根横轴(每行)上
• felx-direction
  • 元素排序方式 横或竖,对应的轴也会更改
• flex-wrap
  • 是元素可以换行,换行后就会有多根横轴,此时需要使用aligin-content来管理所有的横轴

项目属性

• order
  • 值越靠前的排名越前
• align-self
  • 该属性是负责当前项在当前主轴的垂直排列
• flex
  • 当前项占据所有项的百分比