CSS笔记 - flex布局

概念

flex container(flex容器)

• 任何一个HTML元素都可以指定成flex布局(display:flex)，即便是行内元素(display:inline-flex)。但设定为flex布局之后，子元素的float、clear、vertical-align属性会失效。

flex item(容器成员)

• 放入flex容器中的元素都是flex item。

main axis(容器主轴)和cross axis(交叉轴)

• 容器通过两条根轴来确定成员的摆放。水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end。

---

容器属性

flex-direction(排列方向)

• row(水平排列，从左到右)
• row-reverse(水平排列，从右到左)
• column(垂直排列，从上到下)
• column-reverse(垂直排列，从下到上)

flex-wrap(换行方式)

• nowarp(默认不换行)
  
  
• warp(换行)
  
  
• warp-reverse(倒置换行)
  
  

flex-flow

• 等于 flex-direction + flex-wrap的简写方式

justify-content(主轴对齐方式)

• flex-start(靠起始点对齐)
• flex-end(靠终点对齐)
• center(居中对齐)
• space-between(两端对齐，平铺拉伸)
• space-around(两端不对齐，使用相等距离的间隔点，环绕平铺)

align-item(交叉轴对齐方式)

• flex-start(靠交叉轴起点对齐)
• flex-end(靠交叉轴终点对齐)
• center(交叉轴居中对齐)
• stretch(交叉轴拉伸)
• baseline(以容器元素的第一行文字基线对齐)

align-content(主轴多行的对齐方式)

• flex-start(靠交叉轴的起点对齐)
• flex-end(靠交叉轴的终点对齐)
• center(相对交叉轴，居中对齐)
• stretch(相对交叉轴拉伸)
• space-between(交叉轴两端对齐，平铺拉伸)
• space-aground(交叉轴两端不对其，使用相等距离的间隔点，环绕平铺)

---

容器成员的属性

order：

• 定义容器元素的排序编号，由小到大，默认为0（可以设置负数）

  
  
  

flex-grow

• 容器元素的平铺比例，默认为0。如果容器元素的flex-grow属性值为1，则等分平铺。

  
  
  

flex-shrink

• 当容器空间不足时的缩放比例。如果容器元素的flex-shrink属性值都未1时，则等分缩放。而其中有个元素设置flex-shrink为0，则不进行缩放。

  
  
  

flex-basis(设定主轴元素的main size)

• length(指定大小)
• auto(原本大小)

flex(flex-grow + flex-shrink + flex-basis的简写方式)

• 默认为 0 1 auto。

align-self(为容器元素设置单独的对齐方式)

• auto(默认，表示继承父元素的align-items属性/如果无父元素则是stretch)
• flex-start(交叉轴起点对齐)
• flex-end(交叉轴终点对齐)
• center(居中对齐)
• baseline(第一行文字基线)
• stretch(拉伸)

---

参考

• flex布局教程