CSS Flex & Grid

CSS Flexbox

Flexbox，或称为弹性盒布局，是一个 CSS 模块，旨在提供一种更有效的方式来布局、对齐和分配容器内的空间，即使容器内项目的大小未知或动态变化。

Display: Flex

display: flex; 属性是弹性盒布局的基础。当应用于一个容器时，它启用了该容器的弹性盒行为。具有 display: flex; 的容器成为一个弹性容器，其子元素为弹性项目。

.container {
  display: flex;
}

Align-Items

align-items 属性用于沿弹性容器的交叉轴对齐弹性项目。交叉轴垂直于主轴，主轴由 flex-direction 属性定义（默认为水平）。

center：将弹性项目在弹性容器的中心对齐。
```
.container {
  align-items: center;
}
```
flex-start：将弹性项目对齐到弹性容器的起始位置。
```
.container {
  align-items: flex-start;
}
```
flex-end：将弹性项目对齐到弹性容器的结束位置。
```
.container {
  align-items: flex-end;
}
```

Justify-Content

justify-content 属性用于沿主轴对齐弹性项目（弹性项目布局的方向）。

flex-start：项目向起始线排列。

.container {
  justify-content: flex-start;
}

flex-end：项目向结束线排列。

.container {
  justify-content: flex-end;
}

center：项目在轴线上居中排列。

.container {
  justify-content: center;
}

space-between：项目在轴线上均匀分布；第一个项目在起始线，最后一个项目在结束线。
```
.container {
  justify-content: space-between;
}
```
space-around：项目在轴线上均匀分布，项目之间的间隔相等。
```
.container {
  justify-content: space-around;
}
```

Flex 属性

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写。flex 属性定义了弹性项目如何增长或收缩以适应弹性容器内的可用空间。

flex: 1;：这使得弹性项目增长以占据容器内剩余空间的等份。
```
.item {
  flex: 1;
}
```
flex: 2;：这使得弹性项目增长到占据 flex: 1; 项目的两倍空间。
```
.item {
  flex: 2;
}
```

当多个弹性项目被赋予这些属性时，它们会根据各自的 flex 值相对调整其大小。

.item1 {
  flex: 1;
}

.item2 {
  flex: 2;
}

.item3 {
  flex: 1;
}

在这个例子中，item2 将占据 item1 和 item3 两倍的空间，因为它的 flex 值为 2，而它们的值为 1。

CSS Grid

CSS Grid 布局是一个功能强大的二维网格布局系统，可以用来创建复杂的网页布局。以下是一些核心概念和属性。

Display: Grid

display: grid; 属性用于将一个元素定义为网格容器，其子元素将成为网格项目。

.container {
  display: grid;
}

Grid-Template-Columns

grid-template-columns 属性用于定义网格容器的列结构。可以使用固定宽度、百分比、比例单位或重复函数来设置列的宽度。

固定宽度列：

.container {
  grid-template-columns: 200px 300px 200px;
}

组合使用固定宽度和自动宽度：

.container {
  grid-template-columns: 200px auto 200px;
}

使用百分比：

.container {
  grid-template-columns: 20% 30% 50%;
}

使用 fr 单位（表示可用空间的分数）：

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

使用 repeat 函数：

.container {
  grid-template-columns: repeat(3, 1fr);
}

.container {
  grid-template-columns: repeat(auto-fill, 200px);
}

Grid-Template-Rows

grid-template-rows 属性用于定义网格容器的行结构，设置方式与 grid-template-columns 类似。

固定高度行：

.container {
  grid-template-rows: 100px 200px 100px;
}

使用 fr 单位：

.container {
  grid-template-rows: 1fr 2fr 1fr;
}

使用 repeat 函数：

.container {
  grid-template-rows: repeat(3, 1fr);
}

Gap

gap 属性用于设置网格项目之间的间距。它可以单独设置行间距和列间距。

同时设置行间距和列间距：
```
.container {
  gap: 10px;
}
```

分别设置行间距和列间距：

.container {
  row-gap: 20px;
  column-gap: 10px;
}

Grid-Area

grid-area 属性用于给网格项目分配区域。你可以使用 grid-template-areas 属性来定义命名区域，并将这些区域分配给网格项目。

定义命名区域：

.container {
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

分配区域给网格项目：

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

Grid-Column 和 Grid-Row

grid-column 和 grid-row 属性用于指定网格项目在网格中的位置和跨度。

网格项目横跨多列：
```
.item {
  grid-column: 1 / 3;
}
```
网格项目横跨多行：
```
.item {
  grid-row: 2 / 4;
}
```

Overflow: Hidden

overflow: hidden; 属性用于裁剪内容，使其不超出容器的边界。常用于防止内容溢出容器。

.container {
  overflow: hidden;
}