Flex布局详解

1. 认识flex布局

flex布局，也叫做弹性布局，是目前web开发中使用最多的布局方案。
任何元素都可以指定为flex布局

• 行内元素开启flex布局

.box {
	display: inline-flex;
}

• 块级元素开启flex布局

.box {
	display: flex;
}

如果是Webkit内核的浏览器，需要加上-webkit前缀。

2. flex布局的重要概念

• flex container：开启flex布局的元素叫做容器(flex container)
• flex items：在容器里的直接子元素叫做项目(flex items)

3. flex布局模式

容器中默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），主轴的开始位置叫做 main start，结束位置叫做 main end，交叉轴的开始位置叫做 cross start，结束位置叫做 cross end，主轴的大小叫做 main size，交叉轴的大小叫做 cross size。

4.容器的属性

• flex-direction：决定主轴的方向（即项目的排列方向）
  默认情况下，flex items 都是沿着 main axis（主轴）从 main start 开始往 main end 方向排布。
  它可能有4个值：
  （1）row（默认值）：主轴为水平方向，从左到右排列items
  （2）row-reverse：主轴为水平方向，从右到左排列items
  （3）column：主轴为竖直方向，从上到下排列items
  （4）column-reverse：主轴为竖直方向，从下到上排列items

• flex-wrap：决定如果一条轴线排不下，如何换行。
  它可能有3个值：
  
  
  

• flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
  flex-flow: < flex-direction > < flex-wrap >;

• justify-content：决定项目在主轴的对齐方式
  它可能有5个值：
  

  

• align-items：决定项目在交叉轴上对齐方式
  它可能有五个值：
  
  
  

• align-content：定义了多行在交叉轴上的对齐方式
  
  
  

5.项目的属性

• order：决定项目的排列顺序，数值越小越排列在前面

• align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

• flex-grow：定义项目的放大比例，默认为0
  （1）如果所有flex items的flex-grow 总和 sum 超过1。
  会把flex container的剩余size全部分完
  比如 item1 flex-grow: 3, item2 flex-grow: 2, item3 flex-grow: 1
  那么item1就扩展为flex container剩余size的3/(3+2+1) 也就是1/2倍
  item2就扩展为flex container剩余size的2/(3+2+1) 也就是1/3倍
  item3就扩展为flex container剩余size的1/(3+2+1)也就是1/6倍
  （2）如果所有flex items的flex-grow总和sum不超过1。
  不会把flex container的剩余size全部分完
  比如 item1 flex-grow: 0.3, item2 flex-grow: 0.2, item3 flex-grow: 0.1
  那么item1只会扩展flex container剩余size的0.3倍
  item2只会扩展flex container剩余size的0.2倍
  item3只会扩展flex container剩余size的0.1倍

• flex-basis：定义了在分配多余空间之前，项目占据的主轴空间

• flex-shrink：定义项目的缩小比例，默认为1
  当flex items在main axis方向上超过了flex container 的size，flex-shrink属性才会有效。
  和flex-grow属性类似。

  它的值和align-items一样，只不过它是用在项目上的属性，可以覆盖住容器的align-items属性。

• flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

（如果有什么错误，欢迎大佬在评论区指正，thank you~）