在本文中，我将教大家 CSS Flexbox 基础知识，以便大家以后可以创建自己的响应式网站。我将解释 Flexbox 的每个属性是如何工作的，并且我会给大家一个备忘清单，它涵盖了可以用 Flexbox 做的所有事情。我们开始学习之旅吧?

首先，什么是 Flexbox？

当建造房子时，我们需要一个图纸。同样的，我们在做网站的时候也需要一个图纸。与建造房子类似，Flexbox 是我们网页设计的图纸。

Flexbox 模型允许我们布局我们网站的内容。不仅如此，它还帮助我们创建了为多种设备创建响应式网站所需的结构。

这是我使用 Flexbox 作为主要图纸样例创建的演示。

Flexbox盒模型

那么 Flexbox 盒模型是如何工作的呢？弹性项目 [Contents] 沿主轴和交叉轴分布。而且，根据 flex-direction 属性，布局位置在行和列之间发生变化。

弹性盒模型图表

此图表包含我们在使用 Flexbox 盒模型时可以使用的所有可能的属性和值。大家可以在进行项目时参考它并尝试不同的值。

如何设置项目

对于这个项目，我们需要了解一点 HTML、CSS 以及如何使用 VS Code 编辑器的基础知识。大家跟着我一起完成以下任务：

创建一个名为“Project-1”的文件夹并打开 VS Code
创建index.html和style.css文件
安装 Live Server 并运行它。

或者，您可以打开 Codepen 并开始编写代码。

在本教程结束时，大家将能够制作准确而美观的网站布局。

HTML

在 HTML 中，将这些代码行写在网页 body 标记内

<div class="container">
    <div class="box-1"> A </div>
    <div class="box-2"> B </div>
    <div class="box-3"> C </div>
</div>

CSS

.container以类选择器和所有盒子为目标。然后设置框的样式，使它们看起来都相似，如下所示：

注意：不要忘记设置容器的高度。

.container{
   height : 100vh;
}

[class ^="box-"]{
    width: 140px;
    height: 140px;
    background-color: skyblue;
    border: 2px solid black;

    font-size: 65px;
}

可是等等....

在开始之前，我们需要了解父类和子类之间的关系。

Flexbox 适用于父类，而不适用于子类。

在这里，.container 类选择器是父母，我们的.box-*类选择器是我们的孩子。

因此，在类选择器 .container 中应用 display: flex 。并将字母放在框的中心，如下所示：

.container{
    display : flex;
    height : 100vh;

// 在盒子之间设置一些间隙
    gap : 25px;
}
[class ^="box-"]{
//上一步的代码在这里

// 将文本置于中心
    display : flex;
    justify-content : center;
    align-items : center;
}

而且......我们都准备好了！让我们开始编写代码吧。

flex-direction属性

这个属性允许我们设置弹性项目应该在弹性容器内分布的方向。

为了重新创建这些效果，我们需要在 CSS 文件中编写下面这些行：

请注意，我们会将它们写在.container 选择器内。

.container{
//在这里设置阶段的代码

// 这里改变值下d面看结果
    flex-direction : row;
}

justify-content 属性

该属性沿 flex-container 内的主轴排列弹性项目。

要重新创建这些效果，请在 CSS 文件中编写以下代码：

.container{

//在这里设置阶段性代码





//  这里改变值下面看结果

    justify-content: flex-start;

}

align-content属性

此属性沿 flex-container 内的交叉轴排列 flex-item。这类似于 justify-content。

请注意，如果没有flex-wrap属性，此属性将不起作用。这是一个示例：

.container{



//  这里改变值下d面看结果

    align-content: center;



// 没有这一行，align-content 将不起作用 flex

    flex-wrap: wrap;

}

对齐项目属性

此属性沿交叉轴分布 Flex-items 。

为了重新创建这些效果，让我们在 CSS 样式文件中编写以下代码：

.container{

//在这里设置阶段的代码



// 这里改变值下面看结果

    align-items: flex-end;

}

align-self属性

此属性适用于子类。它沿交叉轴定位所选项目。

我们总共有 6 个值：

flex-start
flex-end
center
baseline
stretch
auto

要重新创建效果，请选择任何.box-*并编写以下代码：

.box-2{

// 这里改变值下面看结果

     align-self : center;

}

休息一下

到目前为止，一切进展右得。让我们休息一下吧！

flex - grow | shrink | wrap | basis属性

我们现在讨论的属性将在我们调整窗口大小时起作用。

flex-grow

这个属性根据 flex-container 的宽度增加 flex-item 的大小。

flex-shrink

这个属性帮助弹性项目根据弹性容器的宽度收缩而缩小项目。这与 flex-grow 正好相反。

请注意 flex-grow 和 flex-shrink 对子类起作用。所以，我们将像这样定位我们所有的盒子：

.box-1{
    flex-grow: 1;
}
.box-2{
    flex-grow: 5;
}
.box-1{
    flex-grow: 1;
}

调整窗口大小，我们将看到调整后的结果。

要复制 flex-shrink 的效果，请编写以下代码：

请注意，我们需要先删除 flex-wrap 属性，否则将不起作用。

.box-1{
    flex-shrink: 1;
}
.box-2{
    flex-shrink: 5;
}
.box-1{
    flex-shrink: 1;
}

现在，调整窗口大小，我们将看到调整后的结果。

flex-wrap

此属性可帮助我们设置一行或一行中所需的弹性项目数。

这适用于.container父类。因此，编写以下代码：

.container{
    //other codes are here 
  
// Change value  here to see results
    flex-wrap : wrap;
  }

flex-basis

这类似于为弹性项目添加宽度，但更灵活。例如，flex-basis: 10em 会将弹性项目的初始大小设置为 10em。它的最终大小将基于可用空间、flex-grow 和 flex-shrink 的值而定。

简写 Flexbox 属性

flex 简写

这是flex-grow、flex-shrink和flex-basis属性组合的简写。

我们可以通过编写以下代码来尝试 flex 属性：

请注意，它仅适用于子类：

.box-2{
    flex : 2 1 30em;
}

flex-flow

这是flex-direction和flex-wrap属性的简写：

我们可以通过编写以下代码来试用：

请注意，它仅适用于父类。

.container{
    flex-flow : row wrap;
}

place-content

这是 justify-content 和 align-content 属性的简写：

让我们复制代码以实现效果：

请注意，它适用于父类。

.container{
    place-content : center flex-end;
}

结论

恭喜大家完成了本篇文章的学习，这是大家阅读到最后的奖励??

四时宝库

程序员的知识宝库

CSS Flexbox盒模型基础知识（css 盒子模型）

目录