css响应式之flex布局与grid布局

1.Flex 布局的核心概念

父元素的常用属性

display: flex
将元素设为 Flex 容器，子元素默认水平排列（行方向）。

.container {
  display: flex;
}

flex-direction定义主轴方向（子元素排列方向）：

• row（默认）：水平排列，从左到右。
• column：垂直排列，从上到下。
• row-reverse/column-reverse：反向排列。

justify-content控制子元素在主轴上的对齐方式：

• flex-start（默认）：左对齐/上对齐。
• center：居中。
• space-between：两端对齐，间隔均分。

align-items控制子元素在交叉轴上的对齐方式：

• stretch（默认）：拉伸填充容器高度/宽度。
• center：垂直居中。

gap属性

gap 属性用于在 Flex 布局中设置行与列之间的间距，类似于 Grid 布局的 gap。它实际上是 row-gap 和 column-gap 的简写形式。

基本语法

.container {
  display: flex;
  gap: 10px; /* 同时设置行间距和列间距 */
}

单独设置行或列间距

.container {
  display: flex;
  row-gap: 20px; /* 仅设置行间距 */
  column-gap: 10px; /* 仅设置列间距 */
}

注意事项

• gap 属性在 Flex 布局中的支持情况较新，早期浏览器可能需要前缀或替代方案。

• 对于旧版浏览器，可以使用 margin 作为替代方案，但需要额外处理边缘情况。

---

子元素的常用属性

flex-grow
定义子元素的放大比例（默认值为 0，不放大）：

.item {
  flex-grow: 1; /* 剩余空间按比例分配 */
}

flex-shrink
定义子元素的缩小比例（默认值为 1，允许缩小）。

flex-basis
设置子元素的初始大小（类似 width，但优先级更高）：

.item {
  flex-basis: 100px; /* 初始宽度为 100px */
}

简写 flex
合并 flex-grow、flex-shrink、flex-basis：

.item {
  flex: 1 0 auto; /* 放大比例1，不缩小，初始自动大小 */
}

align-self
覆盖父容器的 align-items，单独设置子元素的对齐方式：

.item {
  align-self: flex-end; /* 底部对齐 */
}

---

实际应用示例

水平居中布局
父容器设置 justify-content: center 和 align-items: center，子元素水平垂直居中。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

等高子元素
子元素默认拉伸至容器高度（align-items: stretch），或显式设置相同高度。

响应式导航栏
通过 flex-grow 分配空间，左侧徽标固定宽度，右侧菜单项自动填充剩余空间：

.logo {
  flex: 0 0 120px; /* 不放大，不缩小，固定宽度 */
}
.menu {
  flex: 1; /* 占据剩余空间 */
}

---

注意事项

• Flex 布局对子元素的 float、clear、vertical-align 无效。
• 父容器设置 flex-wrap: wrap 可允许子元素换行（多行布局）。
• 复杂场景可结合 order 属性调整子元素的显示顺序。

2.grid布局的使用

父盒子（Grid容器）的设置

通过 display: grid 将元素定义为Grid布局容器，其直接子项自动成为Grid项。

.container {
  display: grid;
  grid-template-columns: 100px 200px 1fr; /* 定义列宽 */
  grid-template-rows: 50px auto 100px;     /* 定义行高 */
  gap: 10px;                              /* 行列间距 */
}

定义列和行

• grid-template-columns 支持的取值类型

  固定值（如 100px） 直接指定列宽为固定像素值，例如 grid-template-columns: 100px 200px; 会创建两列，宽度分别为 100 像素和 200 像素。适用于需要严格控制尺寸的场景。

  百分比（如 30%） 根据网格容器的宽度按百分比分配列宽。例如 grid-template-columns: 30% 70%; 会将容器分为两列，分别占 30% 和 70%。需注意百分比是相对于父容器而非总网格区域。

  弹性单位（fr） fr（fraction）单位按剩余空间的比例分配列宽。例如 grid-template-columns: 1fr 2fr; 表示两列宽度比例为 1:2。若与其他单位混用（如 100px 1fr），会先分配固定值再按比例分配剩余空间。

  函数组合（如 minmax(100px, 1fr)） minmax() 函数定义列宽的最小和最大值。例如 grid-template-columns: minmax(100px, 1fr) 2fr; 表示第一列不小于 100px 且不超过 1fr，第二列固定为 2fr。适合响应式布局中限制动态范围。

  实际应用示例

  混合单位布局

  .container {
    display: grid;
    grid-template-columns: 200px 1fr minmax(300px, 50%);
  }
  

  此代码创建三列：第一列固定 200px，第二列占用剩余空间，第三列最小 300px 且最大为容器宽度的 50%。

  重复列模式 使用 repeat() 函数简化重复模式：

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

  生成 3 列等宽布局，每列宽度均为 1fr。也可结合其他单位，如 repeat(2, 100px 1fr) 表示交替两列固定和弹性宽度。

• grid-template-rows：设置行数和高度，规则同列。

间距控制

• gap：统一设置行和列间距（缩写为 row-gap 和 column-gap）。

.container {
  gap: 15px;            /* 行列间距均为15px */
  row-gap: 10px;        /* 仅行间距 */
}

对齐方式

• justify-items：控制所有子项的水平对齐（start/end/center/stretch）。
• align-items：控制所有子项的垂直对齐（取值同上）。

.container {
  justify-items: center; /* 子项水平居中 */
  align-items: stretch;  /* 子项垂直拉伸填满 */
}

隐式轨道

当子项超出显式定义的轨道时，通过以下属性控制隐式轨道的尺寸：

• grid-auto-columns：隐式列的宽度（默认为 auto）。
• grid-auto-rows：隐式行的高度（常用 minmax() 避免内容溢出）。

grid子元素参数详解

在CSS Grid布局中，子元素（Grid Item）可通过以下属性控制其在网格中的位置和尺寸：

网格线的定义

网格线（Grid Lines）是CSS Grid布局中用于划分网格的垂直线和水平线。网格线从1开始编号，垂直方向（列）的网格线从左到右递增，水平方向（行）的网格线从上到下递增。

• grid-row-start / grid-row-end
  指定子元素在行方向的起始和结束网格线，支持线编号、span关键字或命名线。

  .item {
    grid-row-start: 2;
    grid-row-end: span 2; /* 跨2行 */
  }
  

• grid-column-start / grid-column-end
  控制列方向的起始和结束网格线，用法与行方向相同。

  .item {
    grid-column-start: sidebar; /* 使用命名线 */
    grid-column-end: 3;
  }
  

元素跨越多个单元格（单元格合并）

• grid-row / grid-column
  合并行/列的起始和结束位置，格式为 start-line / end-line。

  .item {
    grid-row: 1 / 3;
    grid-column: 2 / span 2;
  }
  

• grid-area
  综合指定子元素的位置，可接受以下值：

  1. 命名区域（需在父容器中定义grid-template-areas）；
  2. 行/列起止线的简写：row-start / column-start / row-end / column-end。

  .item {
    grid-area: header; /* 使用命名区域 */
    /* 或 */
    grid-area: 1 / 2 / 3 / 4; /* 行1到3，列2到4 */
  }
  

对齐控制

• justify-self
  水平对齐子元素（针对单元格），可选值：start、end、center、stretch。
• align-self
  垂直对齐子元素，可选值与justify-self类似。
• place-self
  合并水平和垂直对齐，格式为 align-self justify-self。

层叠顺序

• z-index
  控制子元素在重叠时的堆叠顺序，数值越高越靠前。

示例代码

.item {
  grid-row: 2 / 4;
  grid-column: 1 / span 2;
  justify-self: center;
  align-self: end;
  z-index: 10;
}

通过合理组合这些属性，可精确控制子元素在网格中的布局和表现。

流方向

• grid-auto-flow：控制子项的自动排列方向，可选 row（默认横向）、column（纵向）或 dense（密集填充空白）。

.container {
  grid-auto-flow: dense; /* 自动填充空白区域 */
}