Flexbox弹性盒模型详解

导读

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）

Flexbox弹性盒模型详解