资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

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

创作时间:

作者:

@小白创作中心

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

引用

CSDN

https://blog.csdn.net/qq_41765777/article/details/141248115

Flex布局和Grid布局是现代Web开发中常用的两种布局方式。Flex布局主要用于一维布局，可以方便地实现元素的对齐和分布；而Grid布局则是一种二维布局系统，可以同时控制行和列，适合创建复杂的网格布局。本文将详细介绍这两种布局方式的基本概念、主要属性和应用场景。

Flex布局详解

前言

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

一、基本概念

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

二、主要属性

容器属性

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：轴线占满整个交叉轴。

项目属性

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; }

在这个例子中，我们创建了一个简单的页面布局，包括头部（header）、侧边栏（sidebar）、主内容区（main）和底部（footer）。使用Grid布局，我们可以轻松地定义每个部分的排列方式和位置。