flex布局方法。

基础概念：

1. 块级元素（black element） 典型代表：div,section
   我们可以自定义它的高度宽度（可对其设置width，height属性)，天生就独占一行（width默认为100%，且默认在其前后添加换行）​
2. 行内元素（inline element）
   我们不能自定义他的高度和宽度（设置width，height无效）显示时不换行。全靠里面的内容撑起来的。
3. 文档流（normal flow）
   元素从左到右，从上到下依次排列。块级元素自动换行，行内元素不会自动换行。
4. position
   CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。
   取值：

1. static （默认取值）即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
2. relative :该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）
3. absolute 元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。
   绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。(触发BFC效果)
4. fixed 元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
5. sticky 粘性定位(不常用)

5. BFC (Block Formatting Context) 块级格式化上下文
   BFC是一个独立的布局环境，其中的元素布局是不受外界的影响.

触发条件

1. 根元素（html） html标签内部为一个BFC区域；
2. float不为none 元素使用了浮动定位，该浮动元素内部可以看做一个BFC区域；
3. overflow不为visible
4. position为fixed，absolute
5. display为flex，inline-flex，inline-block，table-cell，tab-caption

6. z-index 层叠上下文
7. display
   一个div元素，默认display:block
   display 属性可以设置元素的内部和外部显示类型 display types。
   外部显示类型：
   display:block 规定此元素为块级元素
   display:inline-block 规定此元素为内联元素
   内部显示类型：
   display:flex 规定此元素为弹性伸缩容器 ，并根据Flexible Box模型布局其内容。
   Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。
   它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。

1. 当使用 flex 布局时，首先想到的是两根轴线 — 主轴和交叉轴。主轴由 flex-direction 属性定义，另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关, 所以有必要在一开始首先理解它。

   
   
   flex-container.png
   
   

   1.1 主轴(main axis)，主轴区域(main dimension)。弹性容器的主轴指的是弹性元素主要沿着哪个方向布局。它在主轴区域中延伸。
   1.2 主轴起点(main-Start)，主轴终点(main-end)。弹性元素被放置于容器中从主轴起点到主轴终点放置。
   1.3 主轴尺寸(main size)，主轴尺寸属性(main size property)。一个弹性元素的主轴尺寸指的是其在主轴区域内的长度。其主轴尺寸属性指的是其对应的属性。
   2.1 侧轴(cross axis)，侧轴区域(cross dimension)。侧轴垂直于主轴。它在侧轴区域中延伸。
   2.2 侧轴起点(cross-Start)，侧轴终点(cross-end)。浮动行被元素填充，并且在容器中沿侧轴方向从起点向终点分布。
   2.3 侧轴尺寸(cross size)，侧轴尺寸属性(cross size property)。一个弹性元素的侧轴尺寸指的是其在侧轴区域内的长度。其侧轴尺寸属性指的是其对应的属性

2. 主轴方向由 flex-direction 定义，可以取4个值：
   row 从左到右
   row-reverse 从右到左
   column 从上到下
   column-reverse 从下到上
   当你把一个div元素的display属性设置为flex之后，这个div就变成了一个flex容器，flex容器中的直系子元素就会变为 flex 元素。
   所有CSS属性都会有一个初始值，所以这个flex容器中的所有 flex 元素都会有下列行为：

• 元素排列为一行 (flex-direction 属性的初始值是 row)。
• 元素从主轴的起始线开始。
• 元素不会在主维度方向拉伸，但是可以缩小。
• 元素被拉伸来填充交叉轴大小。
• flex-basis 属性为 auto。
• flex-wrap属性为 nowrap。

1. 例子一：使单个子元素垂直水平居中

   
   
   image.png

2. 例子二：使多个子元素垂直水平居中

   
   
   image.png

align-items 属性可以使元素在交叉轴方向对齐。（一般指垂直方向）

1. stretch (默认值) flex元素默认被拉伸，来填充交叉轴方向高度
2. flex-start flex元素不会拉伸；使flex元素按flex容器交叉轴方向的起点对齐
3. flex-end flex元素不会拉伸；使flex元素按flex容器交叉轴方向的终点对齐
4. center flex元素不会拉伸；使flex元素按flex容器交叉轴方向居中对齐
   
   image.png
   
   
   image.png
   
   
   image.png
   
   
   image.png

justify-content属性可以使元素在主轴方向对齐。（一般指水平方向）

1. stretch 默认 使flex元素按flex容器主轴方向的起点对齐
2. flex-start 使flex元素按flex容器主轴方向的起点对齐
3. flex-end 使flex元素按flex容器主轴方向的终点对齐
4. center 使flex元素按flex容器主轴方向居中对齐
5. space-around 把元素排列好之后的剩余空间拿出来，平均分配到元素之间，所以元素之间间隔相等
6. space-between 每个元素的左右空间相等
   
   image.png
   
   
   image.png
   
   
   image.png
   
   
   image.png
   
   
   image.png

flex 元素上的属性：
为了更好地控制 flex 元素，有三个属性可以作用于它们

• flex-grow 设置了一个flex项主尺寸的flex增长系数。它指定了flex容器中剩余空间的多少应该分配给项目（flex增长系数）。
• flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
• flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。

可用空间 （available space）
假设在 1 个 500px 的容器中，我们有 3 个 100px 宽的元素，那么这 3 个元素需要占 300px 的宽，剩下 200px 的可用空间。在默认情况下， flexbox 的行为会把这 200px 的空间留在最后一个元素的后面。这200px就是这个flex容器中的可用空间；

image.png

Flex 元素属性：flex-basis
flex-basis 定义了该元素的空间大小（the size of that item in terms of the space），flex容器里除了元素所占的空间以外的富余空间就是可用空间 available space。 该属性的默认值是 auto 。此时，浏览器会检测这个元素是否具有确定的尺寸。 在上面的例子中, 所有元素都设定了宽度（width）为100px，所以 flex-basis 的值为100px。

image.png

如果没有给元素设定尺寸，flex-basis 的值采用元素内容的尺寸。这就解释了：我们给只要给Flex元素的父元素声明 display: flex ，所有子元素就会排成一行，且自动分配小大以充分展示元素的内容。

image.png

Flex 元素属性：flex-grow
flex-grow 若被赋值为一个正整数， flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸。这会使该元素延展，并占据此方向轴上的可用空间（available space）。如果有其他元素也被允许延展，那么他们会各自占据可用空间的一部分。

image.png

如果我们给上例中的所有元素设定 flex-grow 值为1， 容器中的可用空间会被这些元素平分。它们会延展以填满容器主轴方向上的空间。

image.png

flex-grow 属性可以按比例分配空间。如果第一个元素 flex-grow 值为2， 其他元素值为1，则第一个元素将占有2/4（上例中，即为 200px 中的 100px）, 另外两个元素各占有1/4（各50px）。

image.png

Flex 元素属性： flex-shrink
flex-grow属性是处理flex元素在主轴上增加空间的问题，相反flex-shrink属性是处理flex元素收缩的问题。如果我们的容器中没有足够排列flex元素的空间，那么可以把flex元素flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下。与flex-grow属性一样，可以赋予不同的值来控制flex元素收缩的程度 —— 给flex-shrink属性赋予更大的数值可以比赋予小数值的同级元素收缩程度更大。

在计算flex元素收缩的大小时，它的最小尺寸也会被考虑进去，就是说实际上flex-shrink属性可能会和想象中表现的不一致

image.png

image.png

image.png

image.png

你可能很少看到 flex-grow，flex-shrink，和 flex-basis 属性单独使用，而是混合着写在 flex 简写形式中。 Flex 简写形式允许你把三个数值按这个顺序书写 — flex-grow，flex-shrink，flex-basis。

image.png