Flex弹性盒子布局和Grid网格布局详解

程序员刀哥

于 2024-08-16 14:53:15 发布

阅读量1.1k

点赞数 20

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/qq_41765777/article/details/141248115

版权

Flex布局详解

前言

Flex布局（Flexible Box Layout，也称为弹性盒布局）是CSS3中的一种布局模式，旨在让容器能够自动调整其子元素的大小、顺序和对齐方式，以更好地适应不同设备和屏幕尺寸。它的核心理念是“弹性”，即容器中的元素可以根据可用空间进行伸缩。

一、基本概念

Flex容器（Flex Container）：包含Flex布局的父元素。在CSS中，通过设置display: flex;或display: inline-flex;来创建一个Flex容器。
Flex项目（Flex Items）：直接位于Flex容器中的子元素。所有的直接子元素都会成为Flex项目。

二、主要属性

1. 容器属性

flex-direction：定义主轴方向（即Flex项目的排列方向）。
- row：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。
-gap：设置子元素之间的间距
- row-gap：在flex-direction: row的情况下，gap属性设置的是水平间距。
- column-gap：在flex-direction: column的情况下，gap属性设置的是垂直间距。
flex-wrap：定义如果一条轴线排不下，如何换行。
- nowrap：不换行（默认）。
- wrap：换行，第一行在上方。
- wrap-reverse：换行，第一行在下方。
flex-flow：flex-direction 和 flex-wrap 的简写形式，默认值为 row nowrap。
justify-content：定义沿主轴的对齐方式、或者换行后项目的对齐方式。
- flex-start：与主轴起点对齐（默认）。
- flex-end：与主轴终点对齐。
- center：居中对齐。
- space-between：两端对齐，项目之间的间隔平均分布。
- space-around：每个项目两侧间隔相等。
- space-evenly：每个项目之间的间隔相等。
align-items：定义项目在交叉轴上的对齐方式。
- flex-start：与交叉轴起点对齐。
- flex-end：与交叉轴终点对齐。
- center：交叉轴居中对齐。
- baseline：基线对齐。
- stretch：如果项目未设置高度或设置为 auto，将占满整个容器的高度（默认）。
align-content：定义多根轴线的对齐方式。如果只有一根轴线，该属性不起作用。
- flex-start：与交叉轴起点对齐。
- flex-end：与交叉轴终点对齐。
- center：交叉轴居中对齐。
- space-between：两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧间隔相等。
- stretch：轴线占满整个交叉轴。

2. 项目属性

order：定义项目的排列顺序，数值越小，排列越靠前，默认值为 0。
flex-grow：定义项目的放大比例，默认为 0（即如果有剩余空间，也不放大）。
flex-shrink：定义项目的缩小比例，默认为 1（即如果空间不足，该项目会缩小）。
flex-basis：定义在分配多余空间之前，项目占据的主轴空间，默认为 auto。
flex：flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto，也可以使用百分比来平分容器布局。
align-self：允许单个项目有与其他项目不同的对齐方式，覆盖 align-items。默认值为 auto，继承父元素的 align-items 属性。

三、简单示例

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

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

.item {
  flex: 1;
  margin: 10px;
}

在上面的示例中，.container 是一个Flex容器，.item 是容器中的项目。项目将平均分配空间，并在主轴上两端对齐。

四、应用场景

Flex布局特别适合以下场景：

垂直居中和水平居中：使用 justify-content: center 和 align-items: center 可以轻松实现。
自适应网格布局：通过组合 flex-wrap 和 flex-basis 可以创建自适应网格。
复杂布局的响应式设计：Flex布局能根据屏幕尺寸自动调整子元素的大小和排列方式。

Flex布局提供了一种强大的布局机制，可以简化许多传统的布局任务，尤其是在响应式设计和复杂布局中。

Grid网格布局详解

Grid布局（CSS Grid Layout）是CSS的一种强大布局系统，专门用于创建复杂的二维网格布局。与Flex布局不同，Grid布局不仅能控制水平（行）布局，还能控制垂直（列）布局，使得它非常适合设计网格样式的页面布局。

一、基本概念

Grid容器（Grid Container）：定义了网格布局的父元素。通过设置display: grid;或display: inline-grid;创建一个Grid容器。
Grid项目（Grid Items）：Grid容器中的直接子元素，它们按照网格排列。
Grid线（Grid Lines）：网格中划分行和列的虚拟线，分别称为水平线和垂直线。
网格轨道（Grid Tracks）：行轨道（row tracks）和列轨道（column tracks）是由相邻网格线之间形成的区域。
网格单元格（Grid Cell）：单个的网格区域，通常由四条网格线围成。
网格区域（Grid Area）：由一个或多个网格单元格组成的矩形区域。

二、容器属性

grid-template-columns 和 grid-template-rows：分别定义列和行的尺寸。可以使用px, %, fr（表示分数单位）等单位。例如，grid-template-columns: 100px 1fr 2fr;定义了三列，第一列固定100px，第二列占剩余空间的1/3，第三列占剩余空间的2/3。

grid-template-areas：用于定义网格区域，可以用网格项目的名称来布局。例如：

.container {
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header"
    "sidebar main"
    "footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

grid-gap：定义网格项目之间的间距。也可以分别使用grid-row-gap和grid-column-gap来单独定义行间距和列间距。
justify-items：定义网格项目在列方向上的对齐方式。
- start：对齐到列起点。
- end：对齐到列终点。
- center：在列中居中对齐。
- stretch：拉伸以填充整个列（默认）。
align-items：定义网格项目在行方向上的对齐方式，值同justify-items。
justify-content：定义整个网格在容器中的水平对齐方式。
align-content：定义整个网格在容器中的垂直对齐方式。

三、项目属性

grid-column-start 和 grid-column-end：定义项目在网格中占据的列范围。例如，grid-column: 1 / 3; 表示项目从第1条垂直线开始，延伸到第3条垂直线结束，占据2列。
grid-row-start 和 grid-row-end：定义项目在网格中占据的行范围，使用方式与列类似。
grid-area：指定项目所在的网格区域，既可以使用grid-template-areas定义的区域名称，也可以使用grid-row-start/grid-row-end/grid-column-start/grid-column-end的组合定义。
justify-self：定义单个项目在列方向上的对齐方式，覆盖justify-items属性。
align-self：定义单个项目在行方向上的对齐方式，覆盖align-items属性。

四、简要示例

<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main Content</div>
  <div class="footer">Footer</div>
</div>

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 
    "header header"
    "sidebar main"
    "footer footer";
  grid-gap: 10px;
}

.header { grid-area: header; background-color: lightblue; }
.sidebar { grid-area: sidebar; background-color: lightcoral; }
.main { grid-area: main; background-color: lightgreen; }
.footer { grid-area: footer; background-color: lightgoldenrodyellow; }