CSS Flex 与 CSS 网格

CSS Flex 与 CSS 网格

大家好，我们将学习 CSS Flex 和 CSS Grid。等等……让我们开始吧……

介绍。

弹性​

Flexbox 通过空间分布和对齐功能帮助创建一维布局。 Flexbox 可以更轻松地设计响应式布局，而无需使用浮动或定位。它使使用 CSS 的人的生活变得更加轻松。

网格

网格是一种二维布局模型，有助于创建布局并对齐其中的项目。它提供了一个带有行和列的布局系统，使得在不使用浮动和定位的情况下设计网页变得更加容易。

使用 CSS 创建布局可能很棘手，而且很复杂，因为 flexbox 和网格都用于设计页面布局。本指南包含 flexbox 和 grid 之间的一些区别。我们将看到如何在设计布局时决定使用其中的哪一个。

网格和弹性。

CSS 网格布局和 CSS flexbox 布局之间的基本区别在于 flexbox 是为一维布局而设计的——要么是一行 或者 一列。网格是为二维布局设计的——行和列。然而，这两个规范有一些共同的特点，如果你已经学会了如何使用 flexbox，那么它们的相似之处应该可以帮助你掌握 Grid。

什么是弹性盒？

Flexbox 是一种在 CSS 中布局元素的方式，它分为两个主要组件。 flexbox 容器和 flexbox 项。 flexbox 容器是包含所有 flexbox 项作为其子项的父元素。 flexbox 容器是您定义有关 flexbox 布局的所有属性的地方，然后在各个项目上，您可以进行额外的调整。让我们看一下如何从一个简单的 flexbox 示例开始。如果我们有一个包含子元素的元素，我们需要做的就是将父元素的 display 属性设置为 flex，我们将拥有一个 flex 容器。

弹性盒布局

Flexbox 是第一个以与普通 CSS 完全不同的方式工作的 CSS 布局方法。而不是担心块/内联元素 flexbox 担心主轴和交叉轴。

主轴

默认情况下，主轴（以绿色显示）水平穿过容器，横轴垂直穿过。这意味着任何处理主轴的布局方法都将水平布局元素，而交叉轴将垂直布局元素。让我们先看看如何沿主轴布置元素。

证明内容。

对于所有这些示例，我们将假设弹性项目的宽度为 20%。

弹性启动

将所有项目放置在主轴的开头，默认情况下是轴的左侧。这也是证明内容的默认行为。

弹性中心

将所有项目放置在主轴的中心。这是在 CSS 中居中元素的最简单方法之一。

弹性端

将所有项目放在主轴的末端，默认情况下是轴的右侧。

间隔

这会占用容器内的所有额外空间，并将其均匀地分布在每个元素之间，以在填充满容器时将它们彼此尽可能分开。

环绕空间

这与 space-between 非常相似，但它也在容器外部和第一个/最后一个元素之间增加了空间。容器外部和第一个/最后一个元素之间的空间量正好是元素之间空间量的一半。

柱子

列方向完全交换了我们的轴，所以现在主轴是垂直的，交叉轴是水平的。这意味着如果您使用 justify-content，您将在垂直方向上布置元素，而 algin-items 将在水平方向上工作。

列反向

列反转方向与 柱子 ，但它反转了主轴的方向，所以现在项目从容器的底部开始。

1. 什么是网格？

网格是一组定义列和行的交叉水平和垂直线。元素被放置在这些列和行行内的网格上。网格布局由一个父元素和一个或多个子元素组成。 CSS 网格布局具有以下特点：

2. 网格容器

当一个 HTML 元素的 display 属性设置为 grid 或 inline grid 时，它就变成了一个网格容器。网格容器的所有直接子项都自动成为网格项。网格项的水平线称为行。网格项目的垂直线称为列。列或行之间的空间称为间隙。

举个例子，

有一个包含类的 div 包装器，里面有五个子元素。

您可以通过以下方式将此包装容器设置为网格：

3. 网格轨道

您可以使用 grid-template-columns 和 grid-template-rows 属性在网格上定义行和列。这些定义了网格轨迹。网格轨道是网格上任意两条线之间的空间。

您可以通过添加 grid-template-columns 属性来添加到前面的示例，然后定义列轨道的大小。

您现在已经创建了一个包含三个 400 像素宽的列轨道的网格。子项在每个网格单元格中布置在该网格上。

4. 混合灵活和绝对尺寸

您可以将绝对大小的轨道与 fr 单位混合。第一个轨道是 400 像素，因此从可用空间中取出固定宽度。剩余空间分为三个，并按比例分配给两个灵活轨道。

5. 网格单元

网格单元是 CSS 网格上可以拥有的最小单位。网格单元格类似于表格单元格。一旦将网格定义为父项，子项将在每个已定义网格的一个单元格中布置自己。

6. Fr 单位

您可以使用任何长度单位定义轨道。网格还提供了一个额外的长度单位，以帮助您创建灵活的网格轨道。新的 fr 单位表示网格容器中可用空间的一小部分。

您可以创建三个等宽的轨道，这些轨道会根据可用空间增长和缩小。

关于作者：

:-我自己 Juveria Sadaf Khan，希望你们喜欢这个博客，如果是的话，请为我的赞赏鼓掌。感谢您阅读我的博客以获取更多信息，请关注我。至此，我的博客就结束了。很快就会在下一篇博客中见到你们。到那时保重……

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/33258/28261309