通过构建常用的 Web 组件来学习和掌握 Flexbox

大家好，欢迎来到本教程。今天，我将讲解如何使用 Flexbox 构建常用的 Web 组件。

介绍完毕后，我将引导您完成以下构建：

• 导航栏
• 一张联系卡
• 信用卡结账页面

那么，让我们立即开始吧！🚀

动图

介绍

弹性盒模型提供了一种高效的网页元素布局、对齐和排列方式。学习弹性盒模型对某些人来说可能一开始会很费劲，但一旦你熟悉了它，运用起来就会变得轻松愉快。
我的所有项目都使用了弹性盒模型，效果非常棒！

让我们学习一些基础知识：

1. 显示：弹性

别慌！😨 这是一个 CSS 属性，你可以将它赋给父容器，以便使用 flexbox。例如，如果你有

<main id="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </main>

“main” 标签是父元素，也称为弹性容器。
需要注意的是，此属性默认将子元素内联对齐，即并排放置（从左到右）。子元素也可以称为弹性项目。

2. 弹性方向：行 || 弹性方向：列 || 弹性方向：列反向 || 弹性方向：行反向

我想这已经是不言自明的了。

Flex-direction : row - 当 display : flex 分配给父元素时，这是 flex-items 的默认排列。

Flex-direction : column - 弹性项目 (子元素) 在父元素内从上到下排列。

Flex-direction : row-reverse - 在这种情况下，子元素仍然从左到右排列，但弹性项目的排列从最后一个弹性项目开始到第一个弹性项目。

Flex-direction : column-reverse - 弹性项目位于列中，但顺序相反，类似于 row-reverse。

3. 对齐内容：flex-start || 对齐内容：flex-end || 对齐内容：center || 对齐内容：space-between || 对齐内容：space-around

如果您已经熟悉浮动属性，justify-content 与浮动属性非常相似，但增加了一些功能。

justify-content : flex-start - 此属性将弹性项目与父元素内的左轴对齐。

justify-content : flex-end - 将弹性项目与父元素内的右轴对齐。

justify-content : center - 将弹性项目与父元素的中心对齐。

justify-content : space-between - 对齐弹性项目，使得它们之间有相等的空间。

justify-content : space-around - 对齐弹性项目，使得它们周围有相等的空间。

4. 对齐项：flex-start || 对齐项：center || 对齐项：flex-end

它们与 justify-content 类似，不同之处在于 justify-content 在水平轴上对齐元素，而 align items 在垂直轴上对齐元素。

对齐项目：flex-start

对齐项目：居中

对齐项目：flex-end

TLDR：列出的属性仅限于完成本教程中列出的项目所需的属性。您可以在这里或这里了解其他属性。

一起动手建造吧！🚀

动图

根据你目前所学的知识，尝试一下这个网页布局

1. 简单的结账页面

检查解决方案

2. 联系页面

检查解决方案

3. 导航栏

检查解决方案

你喜欢本教程吗？或者有任何疑问？欢迎在下方留言，并在Twitter上与我联系。

动图