宫格和弹性盒布局怎么用？

在CSS布局中，宫格布局（Grid Layout）和弹性布局（Flexbox）是两种非常常用且强大的布局方式。下面分别详细解释这两种布局方式。

宫格布局（CSS Grid Layout）

概述

CSS Grid Layout是一种二维的布局系统，可以用来创建复杂的网页布局。它通过将页面划分成行和列的网格，来精确地控制元素的位置和大小。

基本概念

Grid Container: 容纳网格布局的元素，通过设置 display: grid; 或 display: inline-grid; 来定义。
Grid Item: 宫格容器内的直接子元素。
Grid Line: 网格中的水平和垂直线，用于定义网格轨道（轨道可以理解为行或列）。
Grid Track: 网格中的行或列，由两条相邻的网格线之间的空间组成。
Grid Cell: 单个网格单元，由一条行线和一条列线之间的空间组成。
Grid Area: 由四条网格线（两条行线和两条列线）围成的矩形区域。

核心属性

grid-template-rows 和 grid-template-columns: 定义网格的行和列的大小。
grid-row 和 grid-column: 指定网格项在网格中的位置。
grid-template-areas: 定义网格区域的布局。
gap: 定义网格行和列之间的间距（包括 row-gap 和 column-gap）。

示例代码

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建3列，每列宽度相等 */
  grid-template-rows: 100px 200px; /* 创建两行，第一行高100px，第二行高200px */
  gap: 10px; /* 行和列之间的间距为10px */
}

.item1 {
  grid-column: 1 / 3; /* 占据第一列和第二列 */
  grid-row: 1; /* 占据第一行 */
}

.item2 {
  grid-column: 3; /* 占据第三列 */
  grid-row: 1 / 3; /* 占据第一行和第二行 */
}

弹性布局（Flexbox Layout）

概述

Flexbox是一种一维的布局系统，用来处理一行或一列中的子元素布局。它特别适合于在需要动态调整的情况下布局元素。

基本概念

Flex Container: 容纳弹性布局的元素，通过设置 display: flex; 或 display: inline-flex; 来定义。
Flex Item: 弹性容器内的直接子元素。
Main Axis: 主轴，是指弹性容器中子元素排列的主要方向，可以是水平（默认）或垂直。
Cross Axis: 交叉轴，垂直于主轴的方向。

核心属性

flex-direction: 定义主轴方向（如 row, row-reverse, column, column-reverse）。
justify-content: 定义主轴上的对齐方式（如 flex-start, flex-end, center, space-between, space-around）。
align-items: 定义交叉轴上的对齐方式（如 stretch, flex-start, flex-end, center, baseline）。
flex-wrap: 定义子元素是否换行（如 nowrap, wrap, wrap-reverse）。
align-content: 定义多行内容在交叉轴上的对齐方式（如 flex-start, flex-end, center, space-between, space-around, stretch）。

示例代码

.container {
  display: flex;
  flex-direction: row; /* 子元素在水平方向排列 */
  justify-content: space-between; /* 子元素在主轴上均匀分布 */
  align-items: center; /* 子元素在交叉轴上居中对齐 */
}

.item1 {
  flex: 1; /* 子元素占据可用空间的1份 */
}

.item2 {
  flex: 2; /* 子元素占据可用空间的2份 */
}