今天刚刚写完第一个静态页面，大概一千行代码，深感自己的技术还很不够，需要大力修炼。在最近感觉flex这个属性特别重要，因此做此终结。

Flex 容器

flex布局需要在一个容器中实现，这个容器就叫做flex容器，可以通过display属性来声明。

contain{ display: flex;}

声明一个flex容器的值在其父元素声明，可以对其子元素起作用。其容器并不只有flex，同时还有inline-flex。前者对应块状元素，而后者则是行内元素。当声明了一个flex容器之后，这个容器子元素的float、clear、vertical-align属性都会失效。

flex-direction

这个属性设置容器的flex item的排列方向，它有以下几个值：

1. row <水平从左向右排列>
2. row-reverse <水平从右向左排列>
3. column <垂直从上到下排列>
4. column-reverse <垂直从下到上排列>

flex wrap

• 在不设置这个属性的情况下，当所有的flex item 的总长度超过容器长度时，item会超出容器，并且不会换行。

  
  image.png
  

  容器中实际上有10个item，但是并没有发生换行，而是超出了容器。

• 但是当我们设置flex-wrap 以后，就可以实现换行了，它的值有以下几个：

1. nowrap 默认值不换行
2. wrap 换行，新的一行在下面；

3. wrap-reverse 换行，旧的一行在下面

   
   image.png

flex-flow

这个属性的作用是决定item在他们排列方向上的对齐方式

1. flex-star 默认值，排列方向起始位置对齐；
2. flex-end 排列方向结束位置对齐；
3. center 矩阵对齐；
4. space-between 两端对齐，如果有剩余空间，则等分间隙；

5. space-around 均匀分布，如果有空隙，两端会存在空隙，且两端空隙为中间空隙的一半。

   
   image.png

align items

该属性也是决定对齐方式，但与上一个不同的是，它决定的是当只有一行时item之间的对齐方式。

1. stretch 默认值，在item未设置高度的情况下，item的高将占满容器，这样每个item的高度都相同。
2. flex-star （item之间在起始位置（这里是顶部）对齐）
3. flex-end （item之间在结束位置（这里是底部）对齐）
4. center （item之间中部对齐）

5. baseline （item以他们内部第一行文字的基线为准对齐）

   
   image.png

align-content

这个属性定义了当有多行item之间的对齐方式

1. stretch 默认值，在item未设置高度的情况下，item的高将占满这一行，这样每个item的高度都相同。
2. flex-start （item在起始位置（这里是顶部）对齐）
3. flex-end (item在结束位置（这里是底部）对齐)
4. center (item之间中部对齐)
5. space-between (两端对齐，如果有剩余空间则平分成为间隙)

6. space-around (均匀分布，如果有空隙，两端会存在空隙，切两端空隙为中间空隙的一半)

   
   image.png

注意：以上属性都是在父级设置；且以下属性都是作用在子元素上面

关于flex子集中的设置：

1. flex有三个属性其实是上面三个属性的简写，默认值是flex: 0 1 auto，分别对应flex-grow flex-shrink flex-basis的默认值。
2. 针对flex-grow和flex-shrink分别代表的意义：当水平方向上的宽度空间超过所有项目的总宽度时，浏览器根据flex-grow的值将这些项目进行比例拉长；当水平方向上的宽度小于所有项目的总宽度时，浏览器会根据flex-shrink的值将这些项目进行等比例缩短。
3. flex-basis 设置项目自身宽度，将会覆盖原有宽度
4. 当设置flex：auto表示flex：1 1 auto；
   当设置flex：none 表示flex：0 0 auto
5. flex 取值为一个长度或者百分比，则这个值为 flex-basis的值，flex-grow取 1，flex-shrink取 1
   flex 取值为两个非负数字时，分别作为flex-grow和flex-shrink的值。
   flex取一个非负数字和长度或百分比，则非负数字为flex-grow的值，长度或百分比为flex-basis的值，flex-shrink取 1。

align-self

1. Flex 容器上的 align-item 对容器内的所有项目生效，而 align-self 则可以对某一个项目进行单独的设置，从而实现其余项目排列在容器上方，而这个项目排列在容器下方的布局，取值有：
   auto <默认值>
   flex-start
   flex-end
   center
   baseline
   stretch

弹性盒模型：display:flex (简略版本)

1. 父级：设置主轴方向（水平|垂直），设置主轴上排列反序 ：flex-direction

• 水平：row (起点在左端)
• 垂直：column (起点在上沿)
• 水平且反向：row-reverse (起点在右端)
• 垂直且反向：column-reverse (起点在下沿)

2. 父级：子元素是否换行：flex-wrap

• 不换行：nowrap
• 换行，第一行在上方：wrap
• 换行，第一行在下方：wrap-reverse

3. 父级：主轴上元素对齐方式，也是主轴富余空间管理：justify-content

• flex-start
• flex-end
• center
• space-between
• space-around

4. 父级：侧轴上元素对齐方式，侧轴富余空间管理：align-items

• flex-start
• flex-end
• center
• baseline
• stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。

5. 父级：多根侧轴上元素对齐方式：align-content

• flex-start：子元素集中在顶部
• flex-end：子元素集中在底部
• center：子元素集中在中间
• space-between：
• space-around：
• stretch（默认值）：轴线占满整个交叉轴。

6. 子元素：具体位置设置（排序）

• order:number; 数值越小越靠前，可以接受0 或者负值

7.1 子元素：元素弹性空间（放大比例）

• flex-grow: 1;（默认为0，即如果存在剩余空间，也不放大）

7.2 子元素：元素弹性空间（缩小比例）

• flex-shrink: 1;(默认为1，即如果空间不足，该项目将缩小。)

7.3 子元素：元素弹性空间（初始比例）

• flex-basis:auto; (它可以设为跟width或height属性一样的值，比如350px，则项目将占据固定空间)

7.4 简写：flex

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

8. 子元素：单独设置侧轴对齐方式：align-self

• auto
• flex-start
• flex-end
• center
• baseline
• stretch