1.Flex布局 设置：
当元素设置了display: flex样式时，表示当前元素开启了flex布局，这个元素成为一个 flex 容器（flex container）。这个元素不会脱离文档流，元素中的内容沿着两个轴的方向进行布局。
开启了flex布局的元素就是一个伸缩容器（flex 容器），伸缩容器中所有的子元素就是伸缩项目。
注意：只是子元素是伸缩项目，不会受到浮动布局影响！！！
/* 块级的弹性盒模型 */ display: flex;
/* 行级的弹性盒模型（不常用） */ display: inline-flex;
通过添加上面这两个CSS属性，就可使当前元素成为一个弹性容器，可以通过 height 和 width 去改变它的大小。
在弹性盒子中存放弹性元素，无论原来的元素是那种类型的元素，所有的弹性元素都会被块状化。
2. Flex布局 轴：
- 主轴（
main axis）：沿着flex元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为main start和main end。 - 侧轴（
cross axis）：垂直于flex元素放置方向的轴。该轴的开始和结束被称为cross start和cross end。
2.1 修改 Flex 轴方向：
弹性盒子提供了 flex-direction 这样一个属性，它可以指定主轴的方向（弹性盒子子类放置的地方）， 它默认值是 row，这使得它们在按你浏览器的默认语言方向排成一排。
在弹性盒子模型中，设置了 display: flex;之后，弹性盒模型中的弹性元素默认是水平排列：
设置主轴方向为水平方向，元素默认是从左向右排列：
/* 弹性元素水平排列 */ flex-direction: row;
反转水平排列，从右向左排列：
flex-direction: row-reverse;
设置主轴方向为列排序，默认方向是从上到下排列：
/* 弹性元素垂直排列 */ flex-direction: column;
反转垂直排列，从下到上排列：
flex-direction: column-reverse;
2.2 弹性元素换行方式：
默认情况下，如果不修改弹性元素的换行方式，会压缩每个弹性元素的宽高，以此适应弹性盒子的宽高。
可以使用flex-wrap样式来修改弹性元素的换行方式，默认的样式属性就是flex-wrap: nowrap;
水平布局的情况下：
主轴（水平）方向上，如果弹性元素的宽度和超出了弹性盒模型的宽度，那么弹性元素会向下以行的方式进行换行显示。如果在侧轴（垂直）方向上，弹性容器的高度有额外空间，会平均分配给每一行显示的弹性元素。
/* 默认弹性盒子装不下就将元素向下按照行的方式换行显示 */ flex-wrap: wrap;
/* 元素溢出时，元素向上按照行的方式换行显示 */ flex-wrap: wrap-reverse;
垂直布局的情况下：
/* 默认弹性盒子装不下就将元素右换行 */ flex-wrap: wrap;
/* 元素溢出时，元素向左换行显示 */ flex-wrap: wrap-reverse;
将 flex-direction和 flex-wrap 进行了组合：
/* 先设置主轴方向是水平的，在设置换行方向是水平向下以行的方式换行 */ flex-flow: row wrap;
2.3 Flex布局 元素对齐：
2.3.1 主轴方向对齐：
使用justify-content可以设置弹性元素在主轴上的对齐方式，默认样式值是：justify-content: flex-start;从主轴起始位置，依次向后对齐。
justify-content: flex-start;
从轴结束位置，依次向前排列
justify-content: flex-end;
注意：元素的排列方式不改变（元素的排列顺序不会改变），只是元素位置是从开始位置对齐，还是从结束位置对齐。
居中排列：
justify-content: center;
平均分布，元素与元素之间的间隔距离相等，与容器边界没有间距：
justify-content: space-between;
平均环绕分布，保持每个元素周围的距离是相等：
justify-content: space-around;
完全平均分布元素，包括对于边框的距离都是相等的：
justify-content: space-evenly;
2.3.2 侧轴方向对齐：
单行元素对齐：
从侧轴开始位置从前向后进行排序：
align-items: flex-start;
从侧轴结束位置从后向前进行排序：
align-items: flex-end;
对齐中心：
align-items: center;
极限高度，会受到弹性元素中的文字大小影响：
拉伸元素高度，直到铺满整个盒子：
注意：该属性的优先级低于元素的 height 属性，如果元素声明了 height 属性，则当前属性不会生效，按照 height 属性生效
/* 侧轴对齐方式，拉伸弹性元素到整个父容器， 前提是弹性元素不能给定高度（默认值） */ align-items: stretch;
多行元素对齐：
控制多行交叉轴排列方式：以最高（最宽）的元素作为一行（一列）的高度（宽度）。
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content: space-between;
align-content: space-evenly;
align-content: stretch;
3.Flex布局 基准长度：
弹性元素在主轴上的基准长度是：替换原有的弹性元素在主轴上的长度。通过flex-basis样式值设置弹性元素在主轴上的基准长度。如果主轴是恒向，则宽度失效；如果是纵向，则高度失效。
默认值是：flex-basis: auto;，浏览器会根据这个属性计算弹性盒模型的主轴剩余空间。
flex-basis: 200px;
4.Flex布局 弹性元素伸缩：
4.1 弹性元素 拉伸：
该属性设置在弹性元素上，对弹性盒子未被使用的空间进行按比例分配：
flex-grow: 0;
flex-grow: 1;
4.2 弹性元素 压缩：
该属性设置在弹性元素上，对弹性盒子已经占用的空间进行按比例压缩。使用 flex-shrink控制元素的缩放比例：
注意：避免使用flex-wrap换行样式。
flex-shrink: 1;
最低的压缩极限是弹性元素中的内容呈现。
4.3 弹性元素 组合属性：
/* 弹性元素拉伸比例 弹性元素的压缩比例 弹性元素的基准长度*/ flex: flex-grow flex-shrink flex-basic;
设置弹性元素可以压缩、拉伸，不设置基准宽度，可以简写为：
flex: auto;
设置元素为可以压缩、拉伸，设置基准长度为0，可以简写为：
flex: 1;
设置元素为不可以压缩、拉伸，不设置基准长度，可以简写为：
flex: none;
5.Flex布局 排序和单独对齐：
5.1 弹性元素 排序：
单独为某个弹性元素设置排序顺序，order值越小，越先出现。
order: 1;
5.2 弹性元素 单独对齐：
只能单独调整单侧轴上的对齐，无法调整主轴上的单个元素对齐。
flex-self: flex-end;
6.Flex布局 水平垂直居中：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .outer { height: 400px; width: 600px; background-color: darkgray; /* 开启Flex弹性布局 */ display: flex; } .inner { height: 200px; width: 300px; box-sizing: border-box; background-color: skyblue; /* 使用 margin 实现居中*/ margin: auto; } </style> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .outer { height: 400px; width: 600px; background-color: darkgray; /* 开启Flex弹性布局 */ display: flex; /* 设置水平Flex居中 */ flex-direction: row; justify-content: center; align-items: center; } .inner { height: 200px; width: 300px; box-sizing: border-box; background-color: skyblue; } </style> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .outer { height: 400px; width: 600px; background-color: darkgray; /* 开启Flex弹性布局 */ display: flex; /* 设置水平Flex居中 */ flex-direction: row; /* 使用flex-wrap指定换行方式，配合align-content实现居中 */ flex-wrap: wrap; justify-content: center; /* 使用align-content指定多行对齐方式 */ align-content: center; } .inner { height: 100px; width: 200px; box-sizing: border-box; background-color: skyblue; } </style> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>
