CSS Grid 和 Flexbox

2024-01-01 09:36

文章标签 css frontend grid flexbox

本文主要是介绍CSS Grid 和 Flexbox，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.使用示例

CSS Grid：
CSS Grid 是一种二维网格布局系统，可以用于创建复杂的网格布局。它允许你将元素放置到网格的行和列上，并通过设置网格属性来控制元素的位置和大小。

创建一个简单的 CSS Grid 布局，可以按照以下步骤进行：

a. 在父容器上应用 display: grid; 属性，将其设置为一个网格容器。
b. 通过设置 grid-template-columns 和 grid-template-rows 属性来定义网格的列和行的大小和数量。
c. 使用 grid-column 和 grid-row 属性来指定元素在网格中的位置。

示例代码：

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

.grid-container {display: grid;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 100px 100px;grid-gap: 10px;
}.item {background-color: #ddd;padding: 10px;text-align: center;
}

上述示例将会创建一个包含 3 列和 2 行的网格布局，每个网格项都会有相同的宽度和高度，并且它们之间有 10px 的间隔。

Flexbox：
Flexbox 是一种一维布局模型，用于创建灵活的布局和对齐方式。它使用 flex 属性和容器的主轴和交叉轴来控制元素的布局和对齐。

创建一个简单的 Flexbox 布局，可以按照以下步骤进行：

a. 在父容器上应用 display: flex; 属性，将其设置为一个 Flex 容器。
b. 使用 flex-direction 属性指定 Flex 容器的主轴方向。
c. 使用 justify-content 和 align-items 属性来控制元素在主轴和交叉轴上的对齐方式。

示例代码：

<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-between;align-items: center;
}.item {background-color: #ddd;padding: 10px;text-align: center;
}

上述示例将会创建一个 Flexbox 布局，其中元素水平排列，并且它们之间有相等的间距。

2.属性

当涉及到更多的 CSS Grid 和 Flexbox 的属性时，以下是一些常用的属性和它们的说明：

CSS Grid 属性：

grid-template-areas：定义网格布局中的区域。通过指定区域的名称，可以更方便地布局元素。
grid-template-columns 和 grid-template-rows：分别定义网格布局的列和行的大小和数量。可以使用长度单位、百分比、关键字（如 auto）或 fr 单位来指定大小。
grid-column 和 grid-row：指定元素在网格中的位置。可以使用关键字（如 span）或数字来指定元素跨越的列或行的数量。
grid-gap：定义网格项之间的间隔。可以使用长度单位或百分比来指定间隔的大小。

Flexbox 属性：

flex-direction：定义 Flex 容器的主轴方向。可以是 row（水平方向）、column（垂直方向）、row-reverse（反向水平方向）或 column-reverse（反向垂直方向）。
justify-content：控制 Flex 容器中元素在主轴上的对齐方式。可以是 flex-start（默认值，靠近主轴起点）、flex-end（靠近主轴终点）、center（居中对齐）、space-between（两端对齐，项目之间间隔相等）或 space-around（每个项目两侧的间隔相等）。
align-items：控制 Flex 容器中元素在交叉轴上的对齐方式。可以是 flex-start（靠近交叉轴起点）、flex-end（靠近交叉轴终点）、center（居中对齐）、baseline（以第一行文字的基线对齐）或 stretch（默认值，拉伸以适应容器）。
flex-grow、flex-shrink 和 flex-basis：这些属性用于控制元素在 Flex 容器中的伸缩行为。flex-grow 定义元素在可用空间中的放大比例，flex-shrink 定义元素在空间不足时的缩小比例，flex-basis 定义元素在没有放大或缩小时的基础大小。