flex简介及其常见布局方式

flex

简介

• 为元素设置display: flex或者 display: inline-flex
  该元素即成为伸缩容器（flex container），
• 设置为flex ，该元素会独占一行
• 设置为 inline-flex，可以与其他 inline 元素在同一行。
• 此时伸缩容器的子元素自动升级为伸缩项目（flex item），伸缩项目的的特点如下，
  • 伸缩项目默认在一行排列。
  • 自动升级为块元素。
  • 所有伸缩项目默认在主轴的 start 处排列。
  • 伸缩项目也可以再次设置为flex，即flex可以互相嵌套。
• inline-flex 行内对齐特点
  • 伸缩容器中有文本内容，基于第一个文本的基线对齐.
  • 伸缩容器中没有有文本内容，也没有子元素，伸缩容器底边位于一行的基线处。
  • 伸缩容器中没有有文本内容，第一个子元素没有，第一个元素底边位于一行的基线处。

伸缩容器有足够空间伸缩项目排列

• 当伸缩容器主轴方向上有“足够空间”时
  • justify-content: flex-start; 项目位于容器的开头 （默认值）
  • justify-content: flex-end; 项目位于容器的结尾
  • justify-content: center; 项目位于容器的中心
  • justify-content: space-between; 项目沿着伸缩容器的主轴均匀分布
  • justify-content: space-around; 项目沿着伸缩容器的主轴均匀分布，但是剩余空间会包裹着每个伸缩项目
• 当伸缩容器侧轴有“足够空间”时
  • align-items: stretch; 每个伸缩项目会沿侧轴被拉伸。（默认值）
  • align-items: center; 所有伸缩项目位于伸缩容器侧轴中部
  • align-items: flex-start; 所有伸缩项目位于伸缩容器侧轴start处
  • align-items: flex-end; 所有伸缩项目位于伸缩容器侧轴end处
  • align-items: baseline; 主轴中伸缩项目基线最大的那个伸缩项目的基线作为所有伸缩项目的对齐基线

伸缩容器空间不足（flex-wrap: 属性规定灵活项目是否拆行或拆列）

• 当设置伸缩项目大小，且伸缩容器无法在主轴方向上容纳所有的伸缩项目时
  • flex-wrap: nowrap; 每个伸缩项目都会被按比例被压缩（默认值）
  • flex-wrap: wrap; 让伸缩项目自动换行，保持原来的大小，且排列方向为从上往下，从左往右排列（flex-start方向开始）
  • flex-wrap: wrap-reverse; 让伸缩项目自动换行，保持原来的大小，且排列方向为从下往上，从左往右排列（flex-end方向开始）

主轴及侧轴相关设置

• 主轴方向（flex-direction: 属性规定灵活项目的方向）
  • flex-direction: row; 水平从左到右（默认值）
  • flex-direction: row-reverse; 水平从右到左
  • flex-direction: column; 竖直从上到下
  • flex-direction: column -reverse; 竖直从下到