导读
- Flexbox背景
- 基础概念 （重点）
- 弹性容器属性（重点）
- 弹性项目属性（重点）
Flexbox背景起源
2017年10月，W3c推荐使用Flexbox模块写布局。
在此之前，我们的布局模型有三种：
- 流动布局
- 浮动布局
- 定位布局
以上三种布局的共同点是：基于元素方向 - 块元素：自上而下
- 行内元素：自左而右
- 在布局的时候，父元素对子元素几乎没有什么掌控力，这句话的意思是说，在布局方面，父子元素之间的关系不够紧密
Flexbox的目的
为各种显示设备和屏幕尺寸提供一种更高效的布局方式，来处理元素的布局以及元素之间的空间
核心思想
赐予父元素一种超能力，让父级素具有改变
子元素的能力
- 改变子元素的尺寸
- 改变子元素的位置
- 改变子元素的排序
- 改变子元素之间的空白
基础概念
弹性盒模型 - 弹性盒模型它指是一套css属性规则，而不是一个css属性。具体来讲，分为两组属性
- 弹性容器属性
- 弹性项目属性
弹性容器- 被设置了display：flex的元素成为弹性容器。弹性容器对子元素有掌控力。
弹性项目- 弹性容器的子元素被称为弹性项目。弹性项目受到父元素的控制。
主轴 - 弹性项目排列的轴，多个弹性项目从主轴起点向主轴终点排列
垂直轴 - 垂直于主轴的轴就是垂直轴，多行弹性项目沿垂直轴排列。
主轴起点：多个弹性项目沿主轴分布的起始点
主轴终点：多个弹性项目沿主轴分布的终点
垂直轴起点：多行弹性项目沿垂直轴分布的起点
垂直轴终点：多行弹性项目沿垂直轴分布的终点
1.display
[图片上传失败...(image-f4a240-1668070314468)]
定义：用于定义弹性容器。
语法：
.container{
display:flex | inline-flex
}
属性值：
- flex：块级弹性容器
- inline-flex：行内块级弹性容器
2.flex-wrap
[图片上传失败...(image-fdc2f9-1668070314468)]
定义：用于定义折行方式。
语法：
.container{
flex-wrap:nowrap | wrap | wrap-reverse;
}
属性值：
- nowrap：不换行，所有弹性项目显示在一行内。（默认值）
- wrap：向垂直轴终点换行。弹性项目会根据容器的宽度自动换行。
- wrap-reverse ：垂直轴起点换行。弹性项目会根据容器的宽度自动换行。
3.flex-direction
[图片上传失败...(image-d9d46b-1668070314468)]
定义：用于设置弹性盒模型的主轴的方向.主轴方向就是元素的排列方式。
语法：
.container{
flex-direction:row | row-reverse | column | column-reverse
}
属性值：
- row:默认值。弹性项目从左向右，从上到下排列
- row-reverse:把主轴设为水平轴，弹性项目从右向左，从上到下排列。
- column：把主轴设为纵轴。弹性项目从上向下，从左向右排列。
- column-reverse：把主轴设为纵轴。弹性项目从上向下，从左向右排列。
4.justify-content
justify:调整
[图片上传失败...(image-5897b9-1668070314468)]
定义：用于设置弹性项目的排列方式。
语法：
.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-6215bb-1668070314468)]
定义：align-items用于设置沿着垂直轴的对齐方式。
语法：
.container{
align-items:flex-start | flex-end | conter | stretch | baseline
}
属性值：
- flex-start ：弹性项目垂直对齐容器的起点位置。
- flex-end ：弹性项目垂直对齐容器的终点位置。
- conter ：弹性项目在弹性容器里居中对齐。
- stretch ：默认。拉伸子元素的高度，弹性项目被拉伸以适合容器。
- baseline ：弹性项目对齐到容器的基线。
6.align-content
[图片上传失败...(image-fddfaa-1668070314468)]
定义：设置弹性项目沿垂直轴的分布方式 / 对齐方式
语法：
.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-ff66a9-1668070314468)]
定义：用于控制弹性项目之前的空白大小
该属性仅仅控制非边缘弹性项目（不控制第一个和最后一个）
语法：
.container{
gap:10px; /*单行：控制水平空白*/
gap:10px 10px ; /*控制水平和垂直间距*/
}
属性值：
- 一个值 ：控制水平空白
- 两个值：控制水平和垂直间距
解决浮动布局高度坍塌的问题：
解决高度塌陷的四种方法：
- BFC
- clear
- 使用伪类after
- clearfix
一、BFC全称 (Block Formatting Context) 块级格式化环境
元素开启BFC的特点:
- 1、开启BFC的元素不会被浮动元素所覆盖
- 2、开启BFC的元素子元素和父元素外边距不会重叠
- 3、开启BFC的元素可以包含子元素
开启BFC的方式:
- 1、设置元素的浮动
- 2、将元素设置为行内块元素
- 3、将元素的overflow设置为一个非visible的值
（常用的方式为元素设置overflow：hidden开启BFC）
