文章参考Flex 布局教程：语法篇- 阮一峰的网络日志http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

这里写图片描述

容器的六个属性

  • flex-direction 决定项目排列方向
  • flex-wrap 决定如何换行
  • flex-flow flex-direction和flex-wrap的简写
  • justify-content 决定水平方向上对齐方式
  • align-items 决定垂直方向上对齐方式
  • align-content 多轴对齐方式

项目的六个属性

  • order 排序顺序
  • flex-grow 放大比例
  • flex-shrink 缩小比例
  • flex-basis
  • flex flex-grow、flex-shrink、flex-basis属性
  • align-self 自定义单个项目的对齐方式