Flexbox – 对齐和分配空间的现代方式

第 14 讲：flexbox – 对齐和分配空间的现代方式

嘿那里！准备好深入研究 css 中最酷、最强大的工具之一了吗？今天，我们将探索 flexbox。如果您曾经在以简洁且响应迅速的方式对齐项目或分配空间方面遇到困难，那么 flexbox 是您最好的新朋友。

1.什么是 flexbox？

flexbox（灵活框布局）是一种一维布局系统，允许您控制容器内元素的对齐、间距和分布 - 即使这些元素的大小未知或动态。

将 flexbox 视为一个工具箱，用于创建可以根据可用空间拉伸、收缩或对齐的布局。

2.魔法从显示开始：flex

要开始使用 flexbox，您只需在容器上设置 display: flex 即可。一旦你这样做了，该容器的所有直接子代都会变成弹性项目，并且它们将立即开始表现不同。

<div class="flex-container">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
</div>

.flex-container {
    display: flex;
}

现在，.flex-container 中的所有项目都是 flex 项目，可以轻松操作。

3.弯曲方向 – 我们应该走哪条路？

默认情况下，flexbox 将项目排列成行（水平），但如果您希望它们排列成列（垂直）怎么办？ flexbox 通过 flex-direction 属性为您提供完全控制。

• 行：在水平行中对齐项目（这是默认值）。
• 列：将项目堆叠在垂直列中。
• row-reverse：与 row 相同，但项目的顺序相反。
• column-reverse：与column相同，但项目以相反的顺序堆叠。

.flex-container {
    display: flex;
    flex-direction: column;
}

现在，物品将垂直堆叠！

4.证明内容合理性 – 传播事物

假设您有三件物品，并且您想将它们均匀地分布在容器中。这就是 justify-content 派上用场的地方。

• flex-start：项目与容器的开头对齐（默认）。
• center：项目居中。
• space- between：项目均匀分布，第一个项目在开始，最后一个项目在结束。
• space-around：项目在每个项目周围以相等的填充间隔。

.flex-container {
    display: flex;
    justify-content: space-between;
}

现在，物品将在容器内均匀分布。

5.对齐项目 – 垂直魔法

justify-content 控制水平对齐，而 align-items 负责垂直对齐（或沿横轴）。以下是您的选择：

• 拉伸：项目拉伸以填充容器（默认）。
• flex-start：项目与顶部对齐。
• flex-end：项目与底部对齐。
• center：项目垂直居中。

.flex-container {
    display: flex;
    align-items: center;
}

现在，所有项目都将在容器内垂直居中。

6. flex-grow、flex-shrink 和 flex-basis – 微调 flex 项目

有时，您希望某些项目增大、缩小或具有固定的起始尺寸。 flex-grow、flex-shrink 和 flex-basis 属性可让您控制该行为：

• flex-grow：控制一个项目相对于其他项目应该增长多少。
• flex-shrink：控制一个项目相对于其他项目应收缩的程度。
• flex-basis：设置项目在增大或缩小之前的初始大小。

示例：

.item {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 100px;
}

这可确保项目从 100 像素开始，但如果需要，它可以增长以填充额外的空间，而不会缩小。

7.实践中的 flexbox 示例

让我们用一个例子将所有这些放在一起！

<div class="flex-container">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
</div>

.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 300px;
    background-color: #f0f0f0;
}

.item {
    background-color: #4CAF50;
    padding: 20px;
    color: white;
    flex-grow: 1;
}

在此示例中：

• 项目排列成行。
• 它们通过 justify-content: space-around 均匀分布。
• 所有项目都在容器中垂直居中，并使用align-items: center。
• 由于 flex-grow，每个项目都会增长以均匀地填充可用空间：1.

8.为什么 flexbox 如此受欢迎

flexbox 消除了我们过去在 css 中遇到的布局设计的复杂性。不再有浮动，不再担心清理，响应式设计变得更加简单！

要点：

• 使用 display: flex 将容器变成 flex 容器。
• 使用flex-direction设置流向（行或列）。
• 使用 justify-content 和 align-items 来控制间距和对齐。
• 使用 flex-grow、flex-shrink 和 flex-basis 微调您的弹性项目。

在 linkedin 上关注我-

里多伊·哈桑