弹性盒模型是什么?
1.（是什么？）弹性模型是C3的一个布局模型，它包括主元素和父元素两套属性。
弹性模型是目前移动端的主流布局模型。
2.（为什么？）弹性盒模型（）是为了多屏幕设计的，在多屏幕设计布局方面更加灵活，所有子元素都参照主侧轴布局。（主轴，垂直轴）
3.（怎么办？）弹性盒模型是属于一维（单向），适用于局部组件，不适合做页面框架布局。**
- Flexbox背景起源
- 基础概念（重点）
- 弹性容器属性（重点）
- 弹性项目属性（重点）
- Flexbox背景起源
再次之前，布局有三种： - 流动布局
- 浮动布局
- 定位布局
以上三种布局的共同点是：基于元素方向 - 块元素：自上而下
- 行内元素：自左而右
在布局时候，父元素对子元素几乎没有什么掌控力，这句话意思是说，在布局方面，父元素之间的关系不够紧密。（放大： zoom: 1;）
Flexbox的目的
为各种显示设备和屏幕尺寸提供一种更高效的布局方式，来处理元素的布局以及元素之间的空间。
弹性盒模型特点：
核心思想
赋予父元素一种超能力，让父元素具有改变子元素的能力：
- 改变子元素的尺寸
- 改变子元素的位置
- 改变子元素的排序
- 改变子元素之间的空白
基础概念
弹性盒模型 - 弹性盒模型它指是一套css属性规则，而不是一个css属性。
具体来讲，分为两组属性：
弹性容器属性
弹性项目属性
弹性容器：被设置了display:flex的元素成为弹性容器。弹性容器对子元素有掌控力。
弹性项目：弹性容器的子元素被称为弹性项目。弹性项目受到父元素的控制。- 主轴： 弹性项目排列的轴，多个弹性项目从主轴起点向主轴终点排列。
- 垂直轴：垂直于主轴的轴就是垂直轴。多行弹性项目沿垂直轴排列。
- 主轴起点 ：多个弹性项目沿主轴分布的起始点。
- 主轴终点：多个弹性项目沿主轴分布的终点。
- 垂直轴起点：多行弹性项目沿垂直轴分布的起始点。
- 垂直轴终点 ：多行弹性项目沿垂直轴分布的终点。
弹性盒模型属性有14个：
- 0.display：设置元素显示方式。
- 1.display-flex：开启（创建弹性盒模型）。
- 2.flex-direction：用于设置子元素的主轴方向。
- 3.flex-wrap：设置换行。
-4.justify-content：用于设置子元素沿着主轴的排列方式。 - 5.align-content：用于设置子元素沿侧轴（垂直轴）的排列方式。
- 6.align-items：用于设置子元素沿行内侧轴（垂直轴）的排列方式。
- 7.flex-flow：是flex-direction（设置主轴的方向）、flex-wrap（设置换行）的简写形式。**
- 8.gap：设置子元素之间的间距。
子元素
1.order：设置指定子元素的排序。
2.flex-grow：设置指定子元素的增长量。（灵活的分配父元素的剩余空间给子元素。）
3.flex-shrink：设置指定子元素的的收缩量。
4.flex- basis ：设置弹性项目主轴的初始尺寸 （设置指定子元素初始宽或高。 ）
5.flex：flex-grow（增长量）、flex-shrink（收缩量）、flex- basis（初始宽或高）的复合写法。
.6.align-self：覆盖align-items的值。
[图片上传失败...(image-6f3335-1668056507838)][图片上传失败...(image-3d9677-1668056519027)]
定义：弹性容器
语法：
.container{
display:flex|liline-flex
}
属性值：
- flex:块级弹性容器
- linline-flex：行内块级弹性容器
2.flex-wrap
[图片上传失败...(image-ca95ee-1668083678645)]
定义：折行方式
语法：
.container{
flex-wrap:nowrap|wrap|wrap-reverse;
}
属性值：
- nowrap:不换行。所有弹性项目显示在一行内。默认值。
- wrap：向垂直轴终点方向换行。弹性项目会根据弹性容器的宽度自动换行。
- wrap-reverse：向垂直轴起点换行。弹性项目会根据弹性容器的宽度自动换行。
3.flex-direction
[图片上传失败...(image-96a818-1668083678645)]
定义：
用于设置弹性盒模型的主轴方向。
主轴方向就是元素的排列方式。
语法：
.container{
flex-direction: row|row-reverse|column|column-reverse|;
}
属性值：
- row: 默认值。把主轴设为水平轴。弹性项目从左向右，从上向下排列。
- row-reverse：把主轴设为水平轴。弹性项目从右向左，从上向下排列。
- column：把主轴设为纵轴。弹性项目从上向下，从左向右排列。
- column-reverse：把主轴设为纵轴，弹性项目从下向上排，从左向右排列。
4. justify-content
[图片上传失败...(image-a693ac-1668083678645)]
定义：
- 用于设置弹性项目的排列方式。
- 沿主轴对齐方式
语法：
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly ；
}
属性值：
- flex-start ：弹性项目从主轴起点向终点排列。
- flex-end：弹性项目从主轴终点向主轴起点排列。（顺序不变）
- center：弹性项目沿主轴居中排列。
- space-between：弹性项目从主轴起点到主轴终点均匀分布。
- space-around：把空白平均分配到弹性项目两侧。
- space-evenly： 把空白平均分配到弹性项目之间。（任意两个弹性项目之间的空白是相等的）
5.align-items
[图片上传失败...(image-a4517d-1668083678645)]
定义：用于设置沿弹性项目行内垂直轴的对齐方式。
语法：
.container {
align-items: stretch | flex-start | flex-end | center | baseline |
}
属性值：
- stretch ： 默认值，默认拉伸子元素的高度
- flex-start ：让弹性项目对齐到垂直轴起点。
- flex-end：让弹性项目对齐到垂直轴终点。
- center ：让弹性项目沿垂直轴居中对齐。
- baseline ：让弹性项目对齐到弹性项目的基线。
6.align-content
[图片上传失败...(image-e71a7c-1668083678645)]
定义：
设置弹性项目沿垂直轴的分布方式/对齐方式。
语法:
.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly |
}
属性轴：
- normal：默认值。
- flex-start: 弹性项目从垂直轴起点向终点排列。
- flex-end：弹性项目从垂直轴终点向垂直轴起点排列。（顺序不变）
- center ：弹性项目沿垂直轴居中排列。
- stretch :弹性项目拉伸高度以适应弹性容器。
- space-between : 弹性项目从垂直轴起点到终点均匀分布。
- space-around： 把空白平均分配到弹性项目两侧。
- space-evenly：把空白平均分配到弹性项目之间。（任意两个弹性项目之间的空白是相等的）
7.gap
[图片上传失败...(image-af94a2-1668083678645)]
定义:
gap属性用控制弹性项目之间的空白大小。
注意：1.该属性仅控制非边缘弹性项目。（不控制第一个和最后一个弹性项目）
2.只有当子元素间距小于gap属性值才会生效。
属性值：
.container{
gap: 10px；/*单行：控制水平间距*/
gap: 10px；/*单行：控制水平和垂直间距*/
gap: 10px 20px; /* 水平间距 垂直间距*/
}
8.，order
定义：规定弹性项目相同于同一容器，内其余，弹性项目都顺序。
语法：
属性值：number 默认值为0，值越大，排序越靠后。
9.flex- basis
定义：规定弹性项目的初始长度。
语法：
属性值：
- auto：默认值。
- number 长度单位或百分比，规定它的初始长度。
10.flex-grow
定义：规定项目对于其余项目的增量。
语法：
属性值：不支持负值。
默认值为0，如flex-grow大于0，则flex容器剩余空间的分配就会发生。
11.flex-shrink
定义：固定在相同的容器中，项目相对于其他弹性项目的收缩量。
语法：
属性值：数字 默认为1 number
12.align-self
定义：定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
语法：
属性值：
- auto 默认值
- stretch 元素被拉伸以适应容器
- center 元素位于容器的中心
- flex-start 元素位于容器开头
- flex-end 元素位于容器结尾
- baseline 元素位于容器的基线上
