Flex布局

Flex布局基本概念

• Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性
• Webkit 内核的浏览器，必须加上-webkit前缀
• 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"
• 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
• 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end
• 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size

容器的属性

• flex-direction：决定主轴的方向，也就是项目的排列方向
  • row(默认值)：主轴为默认方向，起点在左端
  • row-reverse：主轴为水平方向，起点在右端
  • column：主轴为垂直方向，起点在上沿
  • column-reverse：主轴为垂直方向，起点在下沿
• flex-wrap：决定如果项目在一行排不下，是否会换行
  • nowrap(默认值)：不换行
  • wrap：换行，第一行在上方
  • wrap-reverse：换行，第一行在下方
• flex-flow：是flex-direction与flex-wrap的简写方式，默认值为row nowrap
• justify-content：定义了项目在主轴上的对齐方式
  • flex-start(默认值)：左对齐
  • flex-end：右对齐
  • center：居中对齐
  • space-between：两端对齐，项目之间的间隔都相等
  • space-around：每个项目两侧的间隔相等，项目之间的间隔为两端的2倍
• align-items：定义在交叉轴上如何对齐
  • flex-start：交叉轴起点位置对齐
  • flex-end：交叉轴的终点位置对齐
  • center： 交叉轴的中点位置对齐
  • baseline：项目的第一行文字的基线对齐
  • stretch(默认值)：如果项目未设置高度或者设为auto，将占满整个容器的高度
• align-content：定义多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用
  • flex-start：与交叉轴的起点对齐
  • flex-end：与交叉轴的终点对齐
  • center：与交叉轴的中点对齐
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
  • space-around：每根轴线两侧的间隔都相等，项目之间的间隔为两端的2倍
  • stretch(默认值)：轴线占满整个交叉轴

项目的属性

• order：定义项目的排列顺序，数值越小，代表排列越靠前，默认为0
• flex-grow：定义项目的放大比例，默认为0，即使有剩余空间，也不会放大
  • 如果，flex-grow值都为1，所有项目将等分剩余空间
  • 所有flex-grow值为1，只有一个flex-grow值为2，则它的空间是其他项目的2倍
• flex-shrink：定义项目的缩小比例，默认为1，如果空间不足，会进行缩小
  • 所有的flex-shrink都为1时，当空间不足时，所有项目会同时缩小的相同的大小
  • 有一个项目值为0时，空间不足，只有该项目不缩小
• flex-basis：定义在分配多余空间之前，项目占据的主轴空间，默认值为auto，即项目原本的大小
• flex：是flex-grow，flex-shrink，flex-basis的简写形式，默认值为0 1 auto，后两个属性可选
  • 该属性有两个快捷键auto(1 1 auto)与none(0 0 auto)
• align-self：允许单个项目有与其他项目不同的对齐方式，可以覆盖align-items属性，默认为auto，表示继承父元素的align-items属性，如果没有父元素，默认为stretch
  • 取值与align-items一致，添加了auto属性值