完整的 Flexbox 教程（带备忘单）目录 - FlexBox 架构 FlexBox 图表 - 如何设置项目 flex-direction justify-content align-content align-items align-self flex - grow | shrink | wrap | basis 简写总结

2025-05-27

完整的 Flexbox 教程（附速查表）

目录 -

FlexBox 架构

弹性框图表——

如何设置项目

弹性方向

内容对齐

对齐内容

对齐项目

对齐自身

flex - 增长 | 收缩 | 包裹 | 基础

短手

结论

让我们重温一下CSS Flexbox 的记忆吧！这里有一份教程和速查表，涵盖了CSS Flexbox的所有功能。开始吧🎖️

FreeCodeCamp 上的原始文章

目录 -

如果您愿意，也可以在 YouTube 上观看此教程：

FlexBox 架构

那么 Flexbox 架构是如何工作的呢？弹性项目（内容）沿着主轴和横轴分布。并且，根据 flex-direction 属性，布局位置会在行和列之间变化。

Flex Box 模型架构

弹性框图表——

此图表包含使用 Flexbox 时可以使用的所有属性和值。您可以在进行项目时参考它并尝试不同的值。

弹性框属性值表

如何设置项目

替代文本

对于这个项目，你需要了解一些 HTML、CSS 知识，以及如何使用 VS Code。跟我一起学习 ->

  1. 创建名为“Project-1”的文件夹并打开 VS Code
  2. 创建 index.html 和 style.css 文件
  3. 安装 Live Server 并运行 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>
Enter fullscreen mode Exit fullscreen mode

CSS

定位到 .container 类和所有盒子。然后设置这些盒子的样式，让它们看起来都差不多。像这样👇

注意：不要忘记输入容器的高度。

.container{
   height : 100vh;
}

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

// To view the letter better
    font-size: 65px;
}
Enter fullscreen mode Exit fullscreen mode

但是等等...

替代文本

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

替代文本

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

这里，.container 类是父类，而 .box-* 类是子类。

所以，在 .container 类中应用 display: flex 。并将字母放置在盒子的中心，如下所示 ->

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

// To place some gap between boxes
    gap : 25px;
}
[class ^="box-"]{
// Code from previous step are here

// Placing text at center 
    display : flex;
    justify-content : center;
    align-items : center;
}
Enter fullscreen mode Exit fullscreen mode

好了……一切就绪！开始写代码吧。😊

替代文本

弹性方向

弹性项目在弹性容器内分布的方向/方向。

弯曲方向

弯曲方向

为了重新创建这些结果，让我们在 CSS 上写下这些行 ->

注意：我们将在 .container 类中写入

.container{
//code from setup stage are here

// Change the value  👇 here to see results
    flex-direction : row;
}
Enter fullscreen mode Exit fullscreen mode

内容对齐

此属性沿弹性容器内的主轴排列弹性项目

证明内容

证明内容

要重新创建这些结果，请在 CSS 上写下这些行 ->

.container{
//code from setup stage are here

//  Change the value  👇 here to see results
    justify-content: flex-start;
}
Enter fullscreen mode Exit fullscreen mode

对齐内容

此属性用于在弹性容器内沿交叉轴排列弹性项目。这与justify-content类似。

对齐内容

对齐内容

请注意，如果没有flex-wrap属性，此属性将不起作用，以下是演示 ->

.container{

//  Change the value  👇 here to see results
    align-content: center;

// without this line, align-content won't work
    flex-wrap: wrap;
}
Enter fullscreen mode Exit fullscreen mode

对齐项目

此属性沿横轴分布 Flex-items

对齐项目

为了重现这些结果，让我们在 CSS 上写 ->

.container{
//code from setup stage are here

// Change the value 👇 here to see results
    align-items: flex-end;
}
Enter fullscreen mode Exit fullscreen mode

对齐自身

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

自我调整

总共有 6 个值

  • 弹性启动
  • 弯曲端
  • 中心
  • 基线
  • 拉紧
  • 汽车

要重新创建结果，请选择任意 .box-* 并写入

.box-2{
// Change the value 👇 here to see results
     align-self : center;
}
Enter fullscreen mode Exit fullscreen mode

flex - 增长 | 收缩 | 包裹 | 基础

我们现在讨论的属性在调整窗口大小时也会生效。让我们开始吧。

  • 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;
}
Enter fullscreen mode Exit fullscreen mode

调整窗口大小并查看结果。

要复制 flex-shrink 的结果，请写入 ->

请注意：删除 flex-wrap 属性，否则它将不起作用。

.box-1{
    flex-shrink: 1;
}
.box-2{
    flex-shrink: 5;
}
.box-1{
    flex-shrink: 1;
}
Enter fullscreen mode Exit fullscreen mode

现在，调整窗口大小并查看结果。

  • flex-wrap：一行/列中所需的 Flex-item 数量。

柔性包装 柔性增长 柔性收缩

这适用于 .container 父类。因此，写 ->

.container{
    //other codes are here 

// Change value 👇 here to see results
    flex-wrap : wrap;
Enter fullscreen mode Exit fullscreen mode
  • flex-basis：类似于为弹性项目增加宽度，但更加灵活。flex-basis: 10em; 会将弹性项目的初始大小设置为 10em。其最终大小将基于可用空间、flex-grow 和 flex-shrink 的值。

短手

替代文本

  • flex ：是flex-grow、flex-shrink和flex-basis组合的简写。

弹性弹性基础

你可以尝试这样写 ->

请注意：它只适用于儿童班

.box-2{
    flex : 2 1 30em;
}
Enter fullscreen mode Exit fullscreen mode
  • flex-flow ： flex-direction和flex-wrap 的简写

替代文本

你可以尝试这样写 ->

请注意：它只适用于父类

.container{
    flex-flow : row wrap;
}
Enter fullscreen mode Exit fullscreen mode

地点内容

这是 justify-content 和 align-content 的简写

替代文本

让我们复制结果

注意：它适用于父类

.container{
    place-content : center flex-end;
}
Enter fullscreen mode Exit fullscreen mode

致谢

凯蒂猫头像

致谢

阅读下文：

乔伊沙希卜

掌握 CSS Flexbox 2021 🔥- 构建 5 种响应式布局🎖️|| CSS 2021

Joy Shaheb ・ 2021年2月4日

#css #tutorial #beginners #webdev
乔伊沙希卜

2021 年通过 5 个练习掌握 CSS 网格模型 || CSS 2021 🔥

Joy Shaheb ・ 2020年12月22日

#教程 #beginners #webdev #css

结论

这是你读到最后的奖牌❤️

非常感谢您的建议和批评❤️

替代文本

替代文本

文章来源：https://dev.to/joyshaheb/flexbox-cheat-sheets-in-2021-css-2021-3edl
Devto 翻译
PREV
在 React 之前先学习这个
NEXT
React 动画入门