前言
在弹性盒子与网格这一章中包含了大量知识点，其中许多属性我以前从未接触过。然而，这些概念看起来非常实用。因此，让我们一起深入学习弹性盒子与网格吧。
Flexbox
Flex Basis 弹性基础
用于控制弹性项目初始大小的工具。
Flex Basis 属性定义了在分配多余空间之前，一个 Flex 项目的默认大小。它是 Flex 项目分配空间前的基础宽度或高度。
Flex Direction 弹性方向
控制弹性项目方向的工具。它用于控制弹性盒子的布局方向。其中最常用的是 flex-col 将弹性盒子的方向变为竖。
Flex Wrap 弹性换行
用于控制弹性项目如何换行的工具。最常用的属性 flex-nowrap 禁止换行。
Flex 弹性
| Class 类 | Properties 属性 | 解释 |
|---|---|---|
| flex-1 | flex: 1 1 0%; | flex-grow: 1（可以增长），flex-shrink: 1（可以收缩），flex-basis: 0%（基础大小为0%）。这通常用于让项目填充可用空间。 |
| flex-auto | flex: 1 1 auto; | flex-grow: 1，flex-shrink: 1，flex-basis: auto（基础大小根据内容自动决定）。这允许项目根据其内容大小和可用空间来调整其大小。 |
| flex-initial | flex: 0 1 auto; | 它设置 Flexbox 项目为flex-grow: 0（不增长），flex-shrink: 1，flex-basis: auto。这通常用于保持项目的基础大小，但允许在必要时收缩。 |
| flex-none | flex: none; | flex-grow: 0，flex-shrink: 0，flex-basis: auto。这防止项目增长或收缩，保持其原始大小。 |
Flex Grow 弹性增长
控制弹性项目如何增长的工具。
| Class 类 | Properties 属性 | 解释 |
|---|---|---|
| grow | flex-grow: 1; | 允许自动增长 |
| grow-0 | flex-grow: 0; | 不许自动增长 |
Flex Shrink 弹性收缩
控制弹性项目收缩的工具。默认允许缩小，也就是默认 flex-shrink: 1; 。
| Class 类 | Properties 属性 | 解释 |
|---|---|---|
| shrink | flex-shrink: 1; | 允许自动收缩 |
| shrink-0 | flex-shrink: 0; | 不许自动收缩 |
在实际开发中，Grid 的使用频率因项目需求和工程师的经验而异。虽然我个人主要依赖 Flexbox 方案，但这并不意味着 Grid 不重要。考虑到本文重点，我们暂不详述 Grid 网格布局。主要是学习成本太高了，要耗费大量精力。不值得！
Justify
Justify Content 对齐方式
用于控制弹性和网格项目在容器主轴上如何定位的工具。纵向 常用的属性有 justify-center 纵向居中对齐。justify-between 平分。
Align
Align Items 对齐项目
用于控制弹性和网格项目在容器交叉轴上如何定位的工具。横向 常用属性有 items-center 横向居中对齐。
Spacing 间距
Padding 内边距
控制元素内边距的工具。以 p 的形式表示 padding 。p-10px 表示上下左右 10 像素距离。p-x-10px 左右 10 像素距离。
Margin 外边距
控制元素边距的工具。以 m 的形式表示 margin。
Space Between 控制子元素边距
用于控制子元素之间空间的工具。space 以开头。
Sizing 尺寸
Width 宽度
设置元素宽度的工具。以 w 表示 width 属性。
Min-Width 最小宽度
设置元素最小宽度的工具。以 min-w 表示 min-width 属性。
Max-Width 最大宽度
设置元素最大宽度的工具。以 max-w 表示 max-width 属性。
Height 高度
设置元素高度的工具。以 h 表示 height 属性。
Min-Height 最小高度
设置元素最小宽度的工具。以 min-h 表示 min-height 属性。
Max-Height 最大宽度
设置元素最大宽度的工具。以 max-h 表示 max-height 属性。
Size 大小
同时设置元素宽度和高度的工具。如 size-10px 等于 width: 10px; height: 10px;