字节面试官爱问的弹性盒模型(弹性布局)！弹性盒模型（Flexbox）是我们前端程序员必须先搞懂的一个知识点，他灵活多变，

前言

弹性盒模型（Flexbox）是一种用于在容器中排列子元素的布局模型。它提供了一种高效的方式来分配空间和对齐元素，使得在不同屏幕尺寸和设备类型下创建灵活的布局变得更加容易。

他有以下三个作用

控制元素分布方法
控制元素对齐方式
控制元素视觉顺序

我们也将从这三个方面去讲解弹性盒模型，我们先来一个demo，讲解第一个。

引入弹性布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer {
            width: 1000px;
            height: 600px;
            background-color: gray;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: tomato;
            border: 1px solid black;
            box-sizing: border-box
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
    </div>
    </body>
</html>

我们创建了一个简单的页面布局，包含一个外部容器和三个内部子元素。这里解释一下box-sizing: border-box这段代码，他会让元素的宽度和高度计算方式发生改变。现在，你设置的宽度和高度值包含了内容区域、边框和内边距。不然子元素会溢出一点。

现在我们想让三个内部子元素变成横向排布，按照以前的方式我们可以用浮动，但是使用浮动，会让这三个子元素脱离文档流，他可能会让父元素高度坍塌，或者影响没设置浮动的子元素，除了浮动以外，我们还有办法去让三个内部子元素变成横向排布，就是我们今天要讲的浮动。我们在 .outer里面添加display:flex

.outer {
            width: 1000px;
            height: 600px;
            background-color: gray;
            display:flex;
        }

之后.outer的容器就变成了弹性盒模型的特点，所以弹性盒模型里的项目即(元素)就会自动按照横向排布了，它们不会脱离文档流，也不会导致父元素高度坍塌。我们现在对上述代码做一个小小的改动，在<div class="inner">3</div>中去掉3加上三个子元素

<div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">
            <div>a</div>
            <div>b</div>
            <div>c</div>
        </div>
    </div>

我们可以看到 a b c是水平垂直向下排序的,如果这个时候我们想让他横向排序，需要在.outer的第三个小盒子里设置display:flex

这个时候就实现了，我们可以知道弹性布局（Flexbox）主要是通过设置父元素（弹性容器）的属性来影响它的直接子元素（弹性子元素）的布局。在默认情况下，弹性布局不会直接影响孙子元素的布局。

补充一个小tips：弹性盒内的直接子元素会自动的块状化(变成块元素)

我们可以把.outer的第二个子元素设置为span标签

然后去看他第二个子元素的样式

你会惊奇的发现 display=block,这里的“Computed”是（计算后的样式）。

弹性布局

很多人肯定会好奇，为什么设置display=flex就可以实现横向排布，我们可以打开MDN的官方手册，搜索弹性盒子去查看。

主轴（Main Axis）和交叉轴（Cross Axis）的概念
- 在弹性布局（Flexbox）中，当一个元素被设置为弹性容器（通过display: flex或display: inline - flex）时，会定义出两个轴：主轴和交叉轴。主轴是弹性子元素主要的排列方向，交叉轴则垂直于主轴。
- 例如，当flex - direction属性设置为默认值row（水平方向）时，主轴是水平的，从左到右，交叉轴就是垂直方向；当flex - direction设置为column（垂直方向）时，主轴是垂直的，从上到下，交叉轴则是水平方向。如果没有定义flex - direction属性，在弹性布局（Flexbox）中，默认的主轴方向是row，即水平方向，从左到右排列弹性子元素。

主轴相关属性和对齐方式

`flex - direction`属性对主轴的影响

如前面所述，它决定了主轴的方向。除了row和column这两个常见值外，还有row - reverse（主轴水平，从右到左）和column - reverse（主轴垂直，从下到上）。例如，以下 CSS 代码将主轴方向设置为从右到左：

    .flex - container {
         display: flex;
         flex - direction: row - reverse;
     }

图片如下

column

column - reverse你会发现123倒过来了,变成了321

`justify - content`属性用于主轴对齐

它用于在主轴上对齐弹性子元素。常见的值有：

flex - start：子元素在主轴的起始位置对齐，这是默认值。例如，当主轴为水平方向时，子元素会在左边对齐。(这是默认的)
flex - end：子元素在主轴的结束位置对齐。如果主轴是水平的，子元素会在右边对齐。

注意,不要把这个和row - reverse搞混了，这个是主轴对齐方式，它主轴的箭头方向还是从左到右的，所以仍然是123，但是是在结束位置对齐

center：子元素在主轴上居中对齐。

这个是最常用的，居中对齐

space - between：子元素在主轴上均匀分布，并且第一个子元素与容器的起始边缘对齐，最后一个子元素与容器的结束边缘对齐。

第一个元素贴左边，最后一个元素贴右边，中间的均匀分布

space - around：子元素在主轴上均匀分布，并且每个子元素的左右两侧（如果主轴是水平方向）或上下两侧（如果主轴是垂直方向）都有相同的间距。

在计算间距时，总间距是均匀分配在子元素两侧的半间距之和。也就是说，对于每个子元素，它的左侧有一个半间距，右侧也有一个半间距,所以夹在他们中间的间距是跟墙间距的两倍

space - evenly用于在主轴上均匀地分布弹性子元素，使得每个子元素之间的间距相等，并且子元素与容器边缘的间距也和子元素之间的间距相同。这种分布方式能够营造出一种非常均衡、对称的布局效果。

`flex-warp`

flex - wrap是应用于弹性容器（flex container）的一个 CSS 属性。它用于控制弹性子元素（flex items）在容器内是否换行以及如何换行。在弹性布局中，当弹性子元素在主轴方向上的总尺寸超过弹性容器的尺寸时，flex - wrap属性就决定了这些子元素的排列方式。已知.outer的宽度是1000px,.inner的宽度是200px，所以.outer可以放5个.inner。如果我们加上了了第六个呢，他会何去何从，我们来看一看

我们发现每一个.inner居然为了加上第六个都压缩变小了，现在可以理解为啥叫弹性盒模型了吧！我们可以不让他们这么委屈，毕竟下面的灰色区域还大着勒，可以请6号出去住，我们可以设置 flex-warp：warp,这个时候就换行了，所以我们也可以推论到,flex-warp的默认值是nowrap，就是不换行。

我们注意到6号元素并没有在垂直方向上紧挨着一号元素，这是因为下文的stretch,等你看到下文你就迎刃而解了。

交叉轴相关属性和对齐方式

`align - items`属性用于交叉轴对齐

它用于在交叉轴上对齐弹性子元素。常见的值有：

stretch：默认值，子元素会被拉伸以填满交叉轴方向的容器空间（前提是子元素没有设置固定的高度或者min - height/max - height）。例如，当主轴为水平方向（flex - direction: row），交叉轴为垂直方向时，如果子元素没有固定高度，会被拉伸到与容器高度相同。

flex - start：子元素在交叉轴的起始位置对齐。

图片和stretch一样

flex - end：子元素在交叉轴的结束位置对齐。

center：子元素在交叉轴上居中对齐。

baseline:将各子元素第一行文本的基线在交叉轴上对齐，用于根据文本基线来规整布局。

`align - self`属性（用于单个子元素）

用来单独调整一个元素，这个属性允许单个弹性子元素覆盖align - items属性为其所在的弹性容器设置的交叉轴对齐方式。例如，在一个弹性容器中，align - items设置为center，但某个子元素希望在交叉轴的起始位置对齐，可以通过设置align - self: flex - start来实现。

 ####  `align - content`属性（用于在交叉轴方向上对齐多行）

align - content是用于弹性容器（flex container）的一个 CSS 属性。它主要用于在交叉轴方向上对齐多行（当flex - wrap设置为wrap或wrap - reverse，导致子元素出现多行排列时）或者多列（如果flex - direction是column且flex - wrap生效）的弹性子元素。

stretch（默认值）

当设置为stretch时，多行或多列的弹性子元素会在交叉轴方向上被拉伸，以填满整个容器在交叉轴方向的空间。每一行（或列）会被拉伸，使得行（或列）与行（或列）之间没有间隙，整体布局看起来比较紧凑。

例如，在一个垂直主轴（flex - direction: column）且flex - wrap: wrap的弹性容器中，多行子元素在水平方向（交叉轴）上会被拉伸，以占据容器的整个宽度。