Flexbox弹性盒模型详解

导读

Flexbox背景
基础概念（重点）
弹性容器属性（重点）
弹性项目属性（重点）

Flexbox背景起源

2017年10月，W3C推荐使用Flexbox模板写布局。
在此之前，我们的布局模型有三种：

流动布局
浮动布局
定位布局
以上三种布局的共同点是：基于元素方向
块元素：自上而下
行内元素：自左而右
在布局的时候，父元素对子元素几乎没有什么掌控力，这句话的意思是说，在布局方面，父元素之间的关系不够紧密。

Flexbox的目的

为各种显示设备和屏幕尺寸提供一种更高效的布局方式，来处理元素的布局及元素之间的空间。

核心思想
赋予父元素一种超能力，让父元素具有改变子元素的能力：

改变子元素的尺寸
改变子元素的位置
改变子元素的排序
改变子元素之间的空白

概念基础

弹性盒模型.png

弹性盒模型 - 弹性盒模型它指是一套css属性规则，而不是一个css属性。具体来讲，
分为两组属性：

弹性容器属性
弹性项目属性

弹性容器 - 被设置了display:flex的元素成为弹性容器。弹性容器对于子元素有掌控力。
弹性项目 - 弹性容器的子元素被称为弹性项目。弹性项目受到父级元素的控制。

主轴 - 弹性项目排列的轴，多个弹性项目从主轴起点向主轴终点排列。
垂直轴 - 垂直于主轴的轴就是垂直轴

主轴起点 - 多个弹性项目沿主轴分布的起始点
主轴起点

垂直起点 - 多个弹性项目沿垂直轴分布的起始点
垂直起点

1.display:flex

[图片上传失败...(image-be4da9-1668844991417)]

2.flex-wrap

[图片上传失败...(image-11f9f4-1668844991417)]
定义
flex-wrap用于定义转折的方式。

语法

.container{
  flex-wrap: nowrap  |  wrap | wrap-reverse
}

nowrap：不换行。所有弹性项目根据显示在一起内。默认值。
wrap：向垂直轴终点方向换行。弹性项目根据弹性容器的宽度自动换行。
wrap-reverse：向垂直轴起点方向换行。弹性项目根据弹性容器的宽度自动换行。

3.flex-direction

[图片上传失败...(image-338767-1668844991417)]
定义
用于设置弹性盒模型的主轴方向。

语法

.container{
   flex-direction：row | row-reverse | column | column-reverse
}

row：默认值。弹性项目从左向右，从上向下排列。
row-reverse：弹性项目从右向左，从上到下排列。
column ：把主轴设为纵轴。弹性项目从上向下，从左向右排列。
column-reverse：把主轴设为纵轴，弹性项目从下向上排，从左向右排列。

4.justify-content

[图片上传失败...(image-a6d83d-1668844991417)]
定义
用于设置弹性项目的排列方式。

语法

.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-9977f9-1668844991417)]
定义
align-items用设置弹性项目沿垂直轴对齐方式
语法

.conteiner{
align-items:flex-start | flex-end | center | stretch | baseline
}

stretch：默认值，默认拉伸子元素的高度
flex-start：让弹性项目对齐到垂直轴起点
flex-end ：让弹性项目对齐到垂直轴终点
center：让弹性项目沿垂直轴居中对齐
baseline：让弹性项目对齐到弹性项目的基线

6. align-content

[图片上传失败...(image-6f77f6-1668844991417)]
定义

设置弹性项目沿垂直轴的分布方式/对齐方式。
语法

.container{
  align-content: normal | flex-start | flex-end | center | stretch | space-between | space-around |space-evenly；
}

normal
flex-start: 弹性项目从垂直轴起点向终点排列。
flex-end：弹性项目从垂直轴终点向垂直轴起点排列。（顺序不变）
center ：弹性项目沿垂直轴居中排列。
stretch :弹性项目拉伸高度以适应弹性容器。
space-between : 弹性项目从垂直轴起点到终点均匀分布。
space-around：把空白平均分配到弹性项目两侧。
space-evenly：把空白平均分配到弹性项目之间。（任意两个弹性项目之间的空白是相等的）

注意：该属性只对多行弹性容器生效，即flex-wrap 设置为 wrap 或 wrap-reverse。单行弹性容器无效，即 flex-wrap 设置为no-wrap。

7. gap属性

[图片上传失败...(image-c491c9-1668844991417)]
定义
gap属性用控制弹性项目之间的空白大小。注意：该属性仅控制非边缘弹性项目。（不控制第一个和最后一个弹性项目）
语法

.container{
  gap:  10px；/*单行：控制水平间距*/
  gap:  10px；/*单行：控制水平和垂直间距*/
  gap: 10px 20px; /* 水平间距 垂直间距*/
}