css

 

 

1. Flexbox (弹性盒子布局)

 

核心概念：一维布局系统

 

Flexbox 是一种一维的布局系统，这意味着它一次只能处理一个维度上的布局：要么是行（水平方向），要么是列（垂直方向）。它非常适合于在单个方向上对齐、分配空间和排序项目。

 

基本组成：

 

• Flex 容器 (Flex Container)：应用 display: flex 或 display: inline-flex 的父元素。
• Flex 项目 (Flex Items)：Flex 容器的直接子元素。

 

轴线概念：

 

Flexbox 围绕两个轴线工作：

 

• 主轴 (Main Axis)：Flex 项目排列的方向。由 flex-direction 属性决定。
• 交叉轴 (Cross Axis)：与主轴垂直的轴线。

 

 

Flex 容器属性：

 

这些属性应用于 Flex 容器（父元素）。

 

1. display
• flex: 块级 Flex 容器。
• inline-flex: 行内级 Flex 容器。
2. flex-direction：定义主轴的方向（即 Flex 项目的排列方向）。
• row (默认): 从左到右（水平方向）。
• row-reverse: 从右到左（水平方向）。
• column: 从上到下（垂直方向）。
• column-reverse: 从下到上（垂直方向）。
3. flex-wrap：定义 Flex 项目是否换行。
• nowrap (默认): 不换行，项目会收缩以适应一行。
• wrap: 换行，从左到右，从上到下。
• wrap-reverse: 换行，从左到右，从下到上。
4. flex-flow：flex-direction 和 flex-wrap 的简写。
• 示例: flex-flow: row wrap;
5. justify-content：定义 Flex 项目在主轴上的对齐方式。
• flex-start (默认): 从主轴起点开始。
• flex-end: 从主轴终点开始。
• center: 居中。
• space-between: 两端对齐，项目之间间距相等。
• space-around: 每个项目两侧的间距相等，所以项目之间的间距是项目到边缘间距的两倍。
• space-evenly: 项目之间以及项目到边缘的间距都相等。
6. align-items：定义 Flex 项目在交叉轴上的对齐方式。
• stretch (默认): 如果项目未设置高度或设置为 auto，则会拉伸以填充容器。
• flex-start: 从交叉轴起点开始。
• flex-end: 从交叉轴终点开始。
• center: 居中。
• baseline: 项目的基线对齐。
7. align-content：定义多行 Flex 项目在交叉轴上的对齐方式（当 flex-wrap: wrap 且有多行时才有效）。
• stretch (默认): 行拉伸以占据剩余空间。
• flex-start: 从交叉轴起点开始。
• flex-end: 从交叉轴终点开始。
• center: 居中。
• space-between: 两端对齐，行之间间距相等。
• space-around: 每行两侧的间距相等。
• space-evenly: 行之间以及行到边缘的间距都相等。
8. gap, row-gap, column-gap：在 Flex 项目之间添加间距。
• gap: 同时设置行和列的间距。
• row-gap: 设置行之间的间距。
• column-gap: 设置列之间的间距。

 

 

Flex 项目属性：

 

这些属性应用于 Flex 项目（子元素）。

 

1. order：定义 Flex 项目的排列顺序。
• 默认值是 0。数值越小，排列越靠前。
2. flex-grow：定义 Flex 项目在有剩余空间时是否以及如何增长。
• 默认值是 0 (不增长)。
• 设置为 1 表示占据所有剩余空间。设置为 2 表示占据两倍于 1 的空间。
3. flex-shrink：定义 Flex 项目在空间不足时是否以及如何收缩。
• 默认值是 1 (收缩)。
• 设置为 0 表示不收缩。
4. flex-basis：定义 Flex 项目在分配剩余空间之前的主轴上的初始大小。
• 可以是长度值 (如 200px)，也可以是百分比 (50%)，或 auto (默认，根据内容或 width/height 决定)。
5. flex：flex-grow, flex-shrink, 和 flex-basis 的简写。
• 示例: flex: 1 1 auto; (等同于 flex-grow: 1; flex-shrink: 1; flex-basis: auto;)
• flex: 1; (等同于 flex: 1 1 0%;)
6. align-self：定义单个 Flex 项目在交叉轴上的对齐方式，会覆盖容器的 align-items 属性。
• 值与 align-items 相同。

 

Flexbox 适用场景：

 

• 导航栏：水平或垂直菜单项的对齐和分布。
• 组件内部布局：例如卡片内的图片和文本对齐。
• 表单元素对齐：标签和输入框的对齐。
• 垂直居中：单个元素或一组元素在容器内居中。
• 响应式设计：通过 flex-wrap 实现项目的自动换行。

 

2. CSS Grid (网格布局)

 

核心概念：二维布局系统

 

CSS Grid 是一种二维的布局系统，这意味着它能够同时处理行和列的布局。它非常适合于创建复杂的页面布局，将页面划分为不同的区域，或者在两个维度上对齐内容。

 

基本组成：

 

• Grid 容器 (Grid Container)：应用 display: grid 或 display: inline-grid 的父元素。
• Grid 项目 (Grid Items)：Grid 容器的直接子元素。
• Grid 线 (Grid Lines)：构成网格的水平和垂直线。
• Grid 轨道 (Grid Tracks)：两条相邻网格线之间的空间（行或列）。
• Grid 单元格 (Grid Cells)：一个网格轨道交叉形成的空间。
• Grid 区域 (Grid Areas)：由多个网格单元格组成的矩形区域。