弹性盒模型
flex是什么？
1.是什么 ，flex布局是C 3的一个布局模型，它包含父元素和子元素两套属性。flex布局是目前移动端的主流布局模型
2.为什么，flex布局是为多屏幕而设计的。它在应对多屏幕布局方面更加灵活所有的子元素都是参照主测轴布局
3.怎么办？， flex布局是一种单向/一维布局，适合做布局组件，不适合做页面框架
如何开始弹性盒模型
如何开启弹性盒模型布局？ 找到父元素给父元素添加 display：flex；
如何让弹性盒模型换行？ flex-wrap
如何修改主轴方向？flex-direction
如何调整弹性项目间距？gap
如何调整弹性项目沿主轴排列方式？justify-content
如何调整弹性项目的垂直轴排列方式？ align-content
如何调整弹性项目的行内垂直轴排列方式？align-items
请谈一谈你对弹性盒模型的认识？ 布局模型，它给弹性盒子的直系子元素提供了强大的空间分布和对齐能力。
使用弹性盒模型写一个六个面的骰子
使用弹性盒模型写一个瀑布流布局
弹性盒模型指的是一套css属性
导读
flexbox背景
基础概念（重点）
弹性容器属性（重点）
弹性项目属性（重点）
Flexbox背景起源
2017年10月，W3C推荐使用flexbox模型写布局
在此之前，我们的布局模型有三种
流动布局
浮动布局
定位布局
以上三种布局的共同点：基于元素方向
块元素：自上而下
行内元素：自左而右
在布局的时候，父元素对子元素几乎没有任何掌控力，这句话的意思是说，在布局方面，父子元素之间的关系不够紧密
Flexbox的目的
为了各种显示设备和屏幕尺寸提供一种更高效的布局方式来处理元素之间的空间
核心思想
赋予父元素一种超能力，让父元素具有改变子元素的能力：
改变子元素的尺寸
改变子元素的位置
改变子元素的排序
改变子元素之间的空白
基础盖念
弹性盒模型 - 弹性盒模型它指是一套css属性规则，而不是一个css属性。具体来讲，分为两组属性
弹性容器属性
弹性项目属性
弹性容器 - 被设置了display:flex的元素成为弹性容器。弹性容器对子元素有掌控力。 弹性项目 - 弹性容器的子元素被称为弹性项目。弹性项目受到父元素的控制。
主轴 - 弹性项目排列的轴，多个弹性项目从主轴起点向主轴终点排列。
垂直轴 - 垂直于主轴的轴就是垂直轴。多行弹性项目沿垂直轴排列。
主轴起点 - 多个弹性项目沿主轴分布的起始点。 主轴终点 - 多个弹性项目沿主轴分布的终点。
垂直轴起点 - 多行弹性项目沿垂直轴分布的起始点。 垂直轴终点 - 多行弹性项目沿垂直轴分布的终点。
display:flex;
定义
Display：flex；属性用于定义弹性容器。
display属性用于设置元素的显示类型
dispaly : block;
display : inline;
display : inline-block'
display : table;
display :f lex; 把元素显示为弹性容器。
语法：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" cid="n92" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" lang="css">.container{
display:flex|inline-flex;
}</pre>
flex : 块级弹性容器
inline-flex: 行内块级弹性容器
[图片上传失败...(image-360f83-1668941216438)]
flex-wrap
定义：
换行
语法：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" cid="n103" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" lang="css">.container{
flex-wrap:nowrap|wrap|wrap-reverse;
}</pre>
[图片上传失败...(image-83362c-1668941216438)]
nowrap:不换行。所有弹性项目显示在一行内。默认
wrap：向垂直轴终点方向换行。弹性项目根据弹性容器的宽度自动换行
wrap-reverse：向垂直轴起点方向换行。弹性项目根据弹性容器的宽度自动换行
flex-direction
定义：
用于设置弹性项目沿主轴的方向排列
语法：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" cid="n116" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" lang="css">.container{
flex-direction:row|row-reverse|column|column-reverse;
}</pre>
row:默认值。弹性项目从左到右，从上向下排
row-reverse:把主轴设为水平轴。弹性项目从右往左，从上往下排列
column:把主轴设为纵轴。弹性项目从上向下，从左往右排
column-reverse:把主轴设为纵轴。弹性项目从下向上，从左右排
[图片上传失败...(image-a9eef7-1668941216438)]
justify-content
定义：
设置弹性项目沿主轴的排列方式
语法：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" cid="n131" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" lang="css">.container{
justify-content:flex-start|flex-end|center|space-between|space-around|space-evenly;
}</pre>
flex-start：弹性项目从主轴起点向终点开始排列
flex-end：弹性项目从主轴终点向主轴起点排列。（顺序不变）
center：弹性项目沿主轴居中排列
space-between：弹性项目从起点到终点均匀分配
space-around：把空白平均分配到每一个弹性项目两侧
space-evenly：把空白平均分配到弹性项目之间（任意两个弹性项目之间的空间是相等的）
[图片上传失败...(image-7d2def-1668941216438)]
align-items
定义：
用设置弹性盒模型沿行内垂直轴排列方式
语法：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" cid="n150" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" lang="css">.container{
align-items:flex-start|flex-end|center|stretch|baseline;
}</pre>
stretch ： 默认值，默认拉伸子元素的高度
flex-start: 让弹性项目在当前行内垂直轴起点对齐
flex-end: 让弹性项目在当前行内垂直轴终点对齐。
center：让弹性项目对齐到垂直轴中间
stretch：让弹性项目对齐到垂直轴终点
baseline:让弹性项目在当前行内对齐到弹性项目的基线。
[图片上传失败...(image-a0136d-1668941216438)]
align-content
定义：
设置弹性项目沿垂直轴的分布方式/对齐方式。
语法：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" cid="n169" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" lang="css">.container{
align-content: normal | flex-start | flex-end | center | stretch | space-between | space-around |space-evenly；
}</pre>
normal:
flex-start: 弹性项目从垂直轴起点向终点排列。
flex-end：弹性项目从垂直轴终点向垂直轴起点排列。（顺序不变）
center ：弹性项目沿垂直轴居中排列。
stretch :弹性项目拉伸高度以适应弹性容器。
space-between : 弹性项目从垂直轴起点到终点均匀分布。
space-around： 把空白平均分配到弹性项目两侧。
space-evenly：把空白平均分配到弹性项目之间。（任意两个弹性项目之间的空白是相等的）
[图片上传失败...(image-226a2-1668941216438)]
gap
定义：
gap属性用控制弹性项目之间的空白。注意：该属性仅控制非边缘弹性项目。（不控制第一个和最后一个弹性项目）
语法：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" cid="n183" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" lang="css">.container{
gap: 10px；/单行：控制水平间距/
gap: 10px；/单行：控制水平和垂直间距/
gap: 10px 20px; /* 水平间距 垂直间距*/
}</pre>
order
定义：
设置子元素的顺序
- 数值大靠后数值小考前
flex-grow
定义：
设置子元素的增长量
flex-shrink
定义：
仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
- 默认值：1
语法：
只能是一个number
flex-basis
定义：
设置弹性项目主轴的初始尺寸
flex-flow
定义：
复合属性 可以使用flex-direction和flex-wrap
flex-self
定义：
并覆盖已有的 align-items 的值，进行子元素垂直排列
语法：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" cid="n211" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" lang="css">align-self:auto|normal|self-start|self-end|flex-start|center|flex-end;</pre>
auto：设置为父元素的align-items值
center：flex 元素会对齐到 主轴 的中间，如果该元素的 侧轴尺寸大于 flex 容器，将在两个方向均等溢出。
flex
定义：
复合属性 增长量 收缩 宽和高
设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。可以控制flex-grow，flex-shrink，flex-basis
flex-grow：值必须是无单位
flex-shifink ：值必须是无单位
-
flex-basis ：必须是一个长度值
-
flex： 0 1 autoauto:自动获取width和height的值
如果没有设置
-
auto
initial
None
