导读
- Flexbox背景 / 起源
- 基础概念 （重点）
- 弹性容器 （重点）
- 弹性项目 （重点）
Flexbox
2017年十月，w3c推荐使用Flexbox模块写布局。
在此之前我们的布局有三种：
- 浮动布局
- 流动布局
- 定位布局
以上三种的共同点是：基于元素方向。
- 块元素：自上而下
- 行内元素：自左而右
- 在布局的时候，父元素对子元素几乎没有什么掌控力。这句话是说：在布局方面，父子元素之间的关系不够紧密
Flexbox的目的
为各种限时设备和屏幕尺寸提供一种更高效的布局方式，来处理元素的布局及元素之间的空间。
核心思想
赋予父元素一种超能力，让父元素具有改变子元素的能力：
- 改变子元素的尺寸
- 改变子元素的位置
- 改变子元素的排序
- 改变子元素之间的空白
'弹性盒模型' - 弹性盒模型指的是一套css属性规则，不是一个css属性，具体来说，分为两组：
- 弹性容器属性
-
弹性项目属性
222.png
弹性容器 ：被设置了display：flex的元素成为弹性容器。弹性容器对子元素有掌控力。
弹性项目： 弹性容器的子元素被称为弹性项目。弹性项目受到父元素的控制
主轴： 弹性项目排列的轴.弹性项目从主轴起点向主轴终点排列。
垂直轴：垂直于主轴的轴就是垂直轴，多行弹性项目沿垂直轴排列。
主轴起点：多个弹性项目沿主轴分布的起始点
主轴终点：多个弹性项目沿主轴分布的终点
垂直轴起点：多行弹性项目沿垂直轴分布的起点
垂直轴终点：多行弹性项目沿垂直轴分布的终点
1.display
[图片上传失败...(image-bb0d62-1668050962103)]
定义：用于定义弹性容器。
语法：
.container{
display:flex | inline-flex
}
属性值：
- flex：块级弹性容器
- inline-flex：行内块级弹性容器
2.flex-wrap
[图片上传失败...(image-60b487-1668050962103)]
定义：用于定义折行方式。
语法：
.container{
flex-wrap:nowrap | wrap | wrap-reverse;
}
属性值：
- nowrap：不换行，所有弹性项目显示在一行内。（默认值）
- wrap：向垂直轴终点换行。弹性项目会根据容器的宽度自动换行。
- wrap-reverse ：垂直轴起点换行。弹性项目会根据容器的宽度自动换行。
3.flex-direction
[图片上传失败...(image-fe69b2-1668050962103)]
定义：用于设置弹性盒模型的主轴的方向.主轴方向就是元素的排列方式。
语法：
.container{
flex-direction:row | row-reverse | column | column-reverse
}
属性值：
- row:默认值。弹性项目从左向右，从上到下排列
- row-reverse:把主轴设为水平轴，弹性项目从右向左，从上到下排列。
- column：把主轴设为纵轴。弹性项目从上向下，从左向右排列。
- column-reverse：把主轴设为纵轴。弹性项目从上向下，从左向右排列。
4.justify-content
justify:调整
[图片上传失败...(image-c64d0b-1668050962103)]
定义：用于设置弹性项目的排列方式。
语法：
.contaienr{
justify-content:flex-start | flex-end | conter | space-between | space-around | space-evenly
}
- flex-start:弹性项目从主轴起点向终点排列
- flex-end : 弹性项目从主轴终点向起点排列 （顺序不变）
- conter ：把弹性项目沿着主轴居中排列
- space-between ：弹性项目在项目与项目之间平均分布剩余空间。
- space-around ： 把剩余空间平均分布到弹性项目的两侧。
- space-evenly ：把剩余空间平均分布到弹性项目之间（任意两个弹性项目之间的空白是相等的。）
5.align-items
[图片上传失败...(image-c8b969-1668050962103)]
定义：align-items用于设置沿着垂直轴的对齐方式。
语法：
.container{
align-items:flex-start | flex-end | conter | stretch | baseline
}
属性值：
- flex-start ：弹性项目垂直对齐容器的起点位置。
- flex-end ：弹性项目垂直对齐容器的终点位置。
- conter ：弹性项目在弹性容器里居中对齐。
- stretch ：默认。拉伸子元素的高度，弹性项目被拉伸以适合容器。
- baseline ：弹性项目对齐到容器的基线。
6.align-content
[图片上传失败...(image-159a94-1668050962103)]
定义：设置弹性项目沿垂直轴的分布方式 / 对齐方式
语法：
.container{
align-content: stretch | center | flex-start | flex-end | space-between |space-around | initial | inherit;
}
属性值：
- normal:默认
- stretch：拉伸到弹性容器的高度
- center：让弹性项目沿着垂直轴居中对齐
- flex-start：让弹性项目对齐到垂直轴的起点位置
- flex-end ：让弹性项目对齐到垂直轴的终点位置
- space-between ：剩余空间均匀分布在弹性项目两侧，两端各占一半
- space-around ： 剩余空间均匀分布在弹性项目之间。
7.gap
[图片上传失败...(image-8429b3-1668050962103)]
定义：用于控制弹性项目之前的空白大小
该属性仅仅控制非边缘弹性项目（不控制第一个和最后一个）
语法：
.container{
gap:10px; /*单行：控制水平空白*/
gap:10px 10px ; /*控制水平和垂直间距*/
}
属性值：
- 一个值 ：控制水平空白
- 两个值：控制水平和垂直间距
8.order
定义：属性规定弹性项目相对于同一容器内其余弹性项目的顺序。
属性值：number默认值为 0。规定弹性项目的顺序。
注：属性值越大，排行越靠后。
9.flex-grow
属性值：规定项目相对于其余项目的增量。 |
1、flex-grow指扩展flex子项所占据的宽度，扩展的空间就是除去元素外剩余的空白间隙。
2、不支持负值，默认值是0，表示不占用剩余的空白间隙扩展自己的宽度。
3、如果flex-grow大于0，则flex容器剩余空间的分配就会发生。
10.flex-shrink
定义：flex-shrink 属性固定在相同的容器中，项目相对于其余弹性项目的收缩量。
属性值：number 数字，规定项目相对于其余弹性项目的收缩量。默认值为 1。
11.flex-basis
定义：属性规定弹性项目的初始长度。
属性值：
- number 长度单位或百分百，规定弹性项目的初始长度。
- auto 默认值。长度等于弹性项目的长度。如果该项目未规定长度，则长度将依据其内容。
解决浮动布局高度坍塌的问题：
解决高度塌陷的四种方法：
- BFC
- clear
- 使用伪类after
- clearfix
12.复合属性flex
语法：
.container{
flex: flex-grow flex-sheink flex-basis
/* flex: 0 1 auto； */
}
属性值：
- flex:1;/如果只有一个值，表示flex-grow/
- flex: 50px;
flex: 50%;flex: 20rem;/*如果有单位则指向 flex-basis*/
一、BFC全称 (Block Formatting Context) 块级格式化环境
元素开启BFC的特点:
1、开启BFC的元素不会被浮动元素所覆盖
2、开启BFC的元素子元素和父元素外边距不会重叠
3、开启BFC的元素可以包含子元素
开启BFC的方式:
1、设置元素的浮动
2、将元素设置为行内块元素
3、将元素的overflow设置为一个非visible的值
（常用的方式为元素设置overflow：hidden开启BFC）
