CSS---- Flex布局

主轴：main axis 交叉轴 ： cross axis

Flex-container:

• display:flex/inline-flex

  ⬆ 开 启 flex 布局

• flex-direction: 决定主轴的方向

• justify-content ：决定主轴上 flex-item 如何排布

• align-items: 决定flex-item 在交叉轴上的对齐方式
  normal stretch flex-start flex-end center
  baseline（与基线对齐 字都对齐）

• flex-wrap: 决定flex-item是否换行
  nowrap wrap

• align-content :决定flex-items 在cross axis对齐方式
  stretch flex-start flex-end center
  *space-between: flex-item 之间的距离相等
  与cross start cross end 两段对齐
  *space-around: flex-item 之间的距离相等
  与cross start cross end 之间的距离为item之间的一半
  *space-evenly:flex-item 之间的距离相等
  与cross start cross end 之间的距离等于item之间距离

• flex-flow:
  flex-direction flex-wrap

Flex-items:

• order
• align-self: 单独决定align-items对齐方式
• flex-grow ：可以使align-items成长 宽度等 多个item 都设置1 可均分剩余宽度
• flex-shrink ： 与grow正相反 shrink为缩小 默认值为1
• flex-basis ： 决定主轴上 item 大小（width）优先级比width高
• flex (flex-grow,flex-shrink,flex-basis)