Flex布局和Grid布局

原创 2025-08-31 19:15:49 2.4k 阅读 AI写同款
收录于
前端学习笔记

当前文章被收录于：

前端学习笔记
16 篇文章 1 人学习

HTML+CSS+JavaScript、Vue2+3

订阅专栏 查看详情
testleaf
testleaf 博客等级 码龄7年 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 2.4k累计阅读 2.5k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要
3514粉丝72篇原创
关注
【LVGL-Flex布局和Grid布局】 主轴的定义描述将子类们排成一行并不换行将子类们排成一行并换行将子类们排成一行并不换行且顺序相反将子类们排成一行并换行且顺序相反将子类们排成一列并不换行将子类们排成一列并换行将子类们排成一列并不换行且顺序相反将子类们排成一列并换行且顺序相反。 阅读详情
AI摘要

本文详细介绍了Flex和Grid两种CSS布局方式，包括它们的基本概念、容器属性、项目属性、特点与优势以及使用示例。Flex布局适用于一维空间的布局，而Grid布局则适用于复杂的二维空间布局。文章还提供了练习网站和调试方法，帮助前端开发者更好地理解和应用这两种布局技术。

注：纯手打，如有错误欢迎评论区交流！
转载请注明出处：https://blog.youkuaiyun.com/testleaf/article/details/144268587
编写此文是为了更好地学习前端知识，如果损害了有关人的利益，请联系删除！
本文章将不定时更新，敬请期待！！！
欢迎点赞、收藏、转发、关注，多谢！！！

目录

一、Flex布局

Flex布局，即Flex Box（弹性布局），是一种现代且强大的CSS布局方式。

1、Flex布局的基本概念

  • Flex容器（flex-container）：使用display: flex或display: inline-flex声明的元素，称为Flex容器（flex-container）。容器内的子元素自动成为Flex项目的成员，称为Flex项目（flex-item）。
  • 主轴（main axis）与交叉轴（cross axis）：Flex容器内默认存在两条轴，水平方向为主轴，垂直方向为交叉轴。主轴的开始位置称为主轴起点（main start），结束位置称为主轴终点（main end）；交叉轴的开始位置称为交叉轴起点（cross start），结束位置称为交叉轴终点（cross end）。
  • 占用主轴空间（main size）与占用交叉轴空间（cross size）：Flex项目默认沿主轴方向排列，单个项目占据主轴的空间称为main size，占据交叉轴的空间称为cross size。
    在这里插入图片描述

2、初始代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      ul{
        list-style: none;
      }
      .container {
        background-color: #dff2b7;
        border: #1c1c1c 2px solid;
        width: 600px;
        height: 200px;
      }
      .item {
        background-color: #fcc887;
        width: 50px;
        height: 50px;
        border: #5ac6b4 1px solid;
      }
    </style>
  </head>
  <body>
    <ul class="container">
      <li class="item">1</li>
      <li class="item">2</li>
      <li class="item">3</li>
      <li class="item">4</li>
      <li class="item">5</li>
      <li class="item">6</li>
      <li class="item">7</li>
      <li class="item">8</li>
      <li class="item">9</li>
      <li class="item">10</li>
    </div>
  </body>
</html>

效果：
在这里插入图片描述

3、Flex布局的容器属性

3.1、flex-direction

决定主轴的方向，即项目的排列方向。取值包括：

  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。

补充代码：

.container{
  display: flex;
  flex-direction: row; /* 默认是横向排列 */
}

效果：
在这里插入图片描述

3.2、flex-wrap

定义项目在轴线上的排列方式，即是否换行。取值包括：

  • nowrap（默认值）：弹性容器为单行。该情况下弹性子项可能会溢出容器。
  • wrap：弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行。
  • wrap-reverse：反转 wrap 排列。
3.3、flex-flow

flex-direction和flex-wrap属性的简写形式。

flex-flow: flex-direction flex-wrap;
3.4、justify-content

定义项目在主轴上的对齐方式。取值包括：

  • flex-start（默认值）：左对齐（主轴为水平方向时）。
  • normal：等价于 flex-start（默认值）。
  • flex-end：右对齐（主轴为水平方向时）。
  • center：居中。
  • space-between：两端对齐，项目之间的间隔相等。
  • space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍。
  • space-evenly：项目之间间距与项目与容器间距相等。

justify-content: flex-start：
在这里插入图片描述
justify-content: normal：
在这里插入图片描述
justify-content: flex-end：
在这里插入图片描述

justify-content: center：
在这里插入图片描述

justify-content: space-between：
在这里插入图片描述

justify-content: space-around：
在这里插入图片描述

justify-content: space-evenly：
在这里插入图片描述

3.5、align-items

定义项目在交叉轴上的对齐方式。取值包括：

  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
  • normal：等价于 stretch（默认值）。
  • flex-start：交叉轴起点对齐。
  • flex-end：交叉轴终点对齐。
  • center：交叉轴中点对齐。
  • baseline：如果弹性盒子元素的行内轴与侧轴为同一条，则该值与 flex-start 等效。其它情况下，该值将与项目的第一行文字的基线对齐。

align-items: stretch：
补充代码：

.container{
  display: flex;
  flex-direction: row; /* 默认是横向排列 */
  align-items: stretch; /* 默认是拉伸高度 */
}
.item{
  height: auto; /* 加上这个 */
}

效果：
在这里插入图片描述
align-items: normal：
在这里插入图片描述
align-items: flex-start：
在这里插入图片描述
align-items: flex-end：
在这里插入图片描述
align-items: center：
在这里插入图片描述
align-items: baseline：
在这里插入图片描述
更进一步了解align-items: baseline：
代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      ul{
        list-style: none;
      }
      .container {
        background-color: #dff2b7;
        border: #1c1c1c 2px solid;
        width: 600px;
        height: 200px;
      }
      .item {
        background-color: #fcc887;
        width: 50px;
        height: 50px;
        border: #5ac6b4 1px solid;
      }
      .container{
        display: flex;
        flex-direction: row; /* 默认是横向排列 */
        align-items: baseline; /* 默认是拉伸高度 */
      }
    </style>
  </head>
  <body>
    <ul class="container">
      <li class="item">1</li>
      <li class="item">2</li>
      <li class="item">3</li>
      <li class="item">4</li>
      <li class="item">5</li>
      <li class="item">6</li>
      <li class="item">7</li>
      <li class="item">8</li>
      <li class="item">9</li>
      <li class="item" style="display: flex;align-items: center;">10</li>
    </div>
  </body>
</html>

效果：
在这里插入图片描述

3.6、align-content

用于控制多行的对齐方式，如果只有一行则不会起作用。

  • stretch（默认值）：各行将会伸展以占用弹性容器在交叉轴上的剩余空间。这是默认行为，意味着如果没有其他对齐要求，各行会尽量填满可用空间。
  • normal：等价于 stretch（默认值）。在大多数情况下，这个值不会改变布局，因为它只是重申了默认行为。
  • flex-start：各行向弹性容器的起始位置对齐（在交叉轴上）。这意味着所有行都会紧贴容器的开始边缘，不会伸展来填充剩余空间。
  • flex-end：各行向弹性容器的结束位置对齐（在交叉轴上）。与 flex-start 相反，所有行都会紧贴容器的结束边缘。
  • center：各行在弹性容器的中间位置对齐（在交叉轴上）。这意味着所有行都会在容器的中心位置堆叠，上下两侧可能会留下等量的空间。
  • space-between：各行在弹性容器内平均分布，但第一行紧贴容器的起始位置，最后一行紧贴容器的结束位置。行与行之间的间距相等，但两端没有间距。
  • space-around：各行在弹性容器内平均分布，每行周围都有相等的间距。这实际上意味着行与行之间的间距是两端间距的两倍。两端的空间是子元素与子元素之间间距大小的一半，确保整体看起来更加均衡。
  • space-evenly：用于在交叉轴上均匀分布多行内容。每行之间的间距以及两端与容器边缘的间距都相等。这确保了整体布局的均衡性和美观性。
3.7、align-items与align-content的区别
  • 作用对象不同：
    • align-items 作用于弹性容器内部的单个弹性子项。
    • align-content 作用于弹性容器内部的多行内容。
  • 应用场景不同：
    • align-items 适用于单行或多行内容中每一行内的子项对齐。
    • align-content 适用于多行内容在交叉轴上的对齐和分布。
  • 取值差异：
    • 尽管两者有一些相同的取值（如 flex-start、flex-end、center），但它们的含义和效果在应用于不同对象时有所不同。
    • align-items 没有 space-between、space-around 和 space-evenly 这三个取值。
    • align-content 在单行内容时无效，因为此时没有多行对齐和分布的需求。

4、Flex布局的项目属性

4.1、order
  • 定义：定义项目的排列顺序。
  • 取值：数值越小，排列越靠前，默认为0。可以取任意整数，包括正数、负数和零。
  • 应用场景：当需要改变flex项目在容器中的默认排列顺序时，可以使用order属性。例如，可以将某个项目的order设置为-1，使其在所有其他项目之前显示。
4.2、flex-grow
  • 定义：定义项目的放大比例。
  • 取值：默认为0，即如果存在剩余空间，项目也不会放大。当设置为正数时，项目将根据该比例分配容器中的剩余空间。
  • 应用场景：当希望flex项目在容器中有剩余空间时能够按比例放大时，可以使用flex-grow属性。例如，如果有两个项目，一个flex-grow为1，另一个为2，那么当容器有剩余空间时，第二个项目将占据的空间将是第一个项目的两倍。
4.3、flex-shrink
  • 定义：定义了项目的缩小比例。
  • 取值：默认为1，即如果空间不足，该项目将缩小。当设置为0时，项目将不会缩小。
  • 应用场景：当容器空间不足以容纳所有flex项目时，可以使用flex-shrink属性来控制项目的缩小比例。例如，如果某个项目非常重要，不希望它缩小，可以将它的flex-shrink设置为0。
4.4、flex-basis
  • 定义：定义了在分配多余空间之前，项目占据的主轴空间（main size）。
  • 取值：可以设为跟width或height属性一样的值（取决于flex容器的方向），也可以设为auto或其他长度值。当设置为auto时，项目的起始大小将基于其原始大小。
  • 应用场景：当需要为flex项目设置固定的起始大小时，可以使用flex-basis属性。例如，如果希望某个项目在分配额外空间之前占据特定的宽度，可以将其flex-basis设置为该宽度值。
.flex-item {
  flex-basis: <length> | auto | percentage;
}
  • <length>：可以是具体的长度值，如 50px、10em 等。
  • auto：表示 flex 项的大小将根据它的内容来决定。这是默认值。
  • percentage：相对于包含块（flex 容器）的宽度来计算。

示例1：使用具体长度值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example</title>
<style>
  .container {
    display: flex;
  }
  .item1 {
    flex-basis: 100px;
    background-color: lightcoral;
  }
  .item2 {
    flex-basis: 200px;
    background-color: lightblue;
  }
  .item3 {
    flex-basis: 150px;
    background-color: lightgreen;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="item1">Item 1</div>
    <div class="item2">Item 2</div>
    <div class="item3">Item 3</div>
  </div>
</body>
</html>

在这里插入图片描述
示例2：使用 auto 值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example</title>
<style>
  .container {
    display: flex;
  }
  .item {
    flex-basis: auto;
    padding: 10px;
    margin: 5px;
    background-color: lightsteelblue;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">A much longer item</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

效果：
在这里插入图片描述
示例3：使用百分比值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example</title>
<style>
  .container {
    display: flex;
    width: 100%;
  }
  .item1 {
    flex-basis: 30%;
    background-color: lightcoral;
  }
  .item2 {
    flex-basis: 50%;
    background-color: lightblue;
  }
  .item3 {
    flex-basis: 20%;
    background-color: lightgreen;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="item1">Item 1</div>
    <div class="item2">Item 2</div>
    <div class="item3">Item 3</div>
  </div>
</body>
</html>

效果：
在这里插入图片描述

4.5、flex:0、flex:1、flex:auto、flex:none的区别
简写等效完整值是否扩大 (flex-grow)是否缩写 (flex-shrink)初始尺寸规则 (flex-basis)典型用途
flex: 00 1 0%否是0%（忽略内容）严格比例分配
flex: 11 1 0%是是0%（忽略内容）等分剩余空间
flex: auto1 1 auto是是由内容/width 决定内容优先 + 自适应
flex: none0 0 auto否否由内容/width 决定固定大小元素
4.6、align-self
  • 定义：允许单个项目有与其他项目不同的对齐方式，可覆盖align-items属性。
  • 取值：与align-items属性的取值相同，包括stretch、flex-start、flex-end、center和baseline。
  • 应用场景：当需要对某个flex项目进行特殊的对齐设置时，可以使用align-self属性。例如，如果其他项目都使用align-items: center进行居中对齐，但某个项目需要顶部对齐，可以将其align-self设置为flex-start。

5、特点与优势

  • 简洁性：与传统的布局方式相比，Flex布局的语法和理解起来更加简单，容易上手。
  • 弹性和自适应：Flex布局能够自动适应不同尺寸的屏幕，让页面更具有弹性。
  • 等高布局：Flex布局可以方便地实现多列等高布局。
  • 对齐和排序：Flex布局支持各种对齐方式，包括水平和垂直对齐，并且可以通过设置order属性对子元素进行排序。

6、使用示例

以下是一个简单的Flex布局示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex布局示例</title>
<style>
  .flex-container {
    display: flex;
    flex-direction: row; /* 主轴为水平方向 */
    justify-content: space-between; /* 项目在主轴上两端对齐 */
    align-items: center; /* 项目在交叉轴上居中对齐 */
    height: 200px;
    border: 1px solid black;
  }
  .flex-item {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    border: 1px solid red;
    text-align: center;
    line-height: 100px;
  }
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>
</body>
</html>

效果：
在这里插入图片描述

在这个示例中，.flex-container是一个Flex容器，包含三个Flex项目.flex-item。通过设置flex-direction为row，将主轴设置为水平方向；通过justify-content属性将项目在主轴上两端对齐；通过align-items属性将项目在交叉轴上居中对齐。

7、总结

综上所述，Flex布局是一种强大且灵活的CSS布局方式，可以简便、完整、响应式地实现各种页面布局。通过学习和掌握Flex布局的相关属性和用法，可以大大提高网页布局的效率和质量。

二、Grid布局

Grid布局，也被称为网格布局，是一种强大的CSS布局方案。

1、Grid布局概述

Grid布局通过将容器划分成一个个网格，并指定网格的大小、布局、位置、层级来实现基本布局。它通过设置子项所占的网格多少、位置、排列从而能够做出各种各样的布局。

2、Grid布局与Flex布局的区别

  • Flex布局是轴线布局，只能指定“项目”针对轴线的位置，可以看作是一维布局。它主要用于一维空间的布局，即沿着一个轴（横向或纵向）分配空间，非常适合列表、导航条、工具栏、页脚等元素的排列。
  • Grid布局则是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局。它允许在二维空间（多行多列）控制元素的位置，非常适合创建复杂的网格结构。

3、Grid布局的基本概念

  • 容器和项目：采用网格布局的区域，称为“容器”（container）。容器内部采用网格定位的子元素，称为“项目”（item）。
  • 行和列：容器里面的水平区域称为“行”（row），垂直区域称为“列”（column）。
  • 单元格：行和列的交叉区域，称为“单元格”（cell）。正常情况下，n行和m列会产生n×m个单元格。
  • 网格线：划分网格的线，称为“网格线”（grid line）。水平网格线划分出行，垂直网格线划分出列。正常情况下，n行有n+1根水平网格线，m列有m+1根垂直网格线。
  • 网格轨道：相邻两个网格线之间的空间，可以是行轨道或列轨道。
  • 区域：以网格线为界可被划分为一块块区域，可使用grid-template-areas定义每个单元格区域名称。

在这里插入图片描述

4、Grid布局的设置

在父元素上设置以下属性来定义Grid布局：

4.1、display属性
  • display: grid：指定一个容器采用网格布局，默认容器为块级元素。
  • display: inline-grid：指定一个容器采用网格布局，容器将被设为行内元素。
  • display: subgrid：定义一个继承其父级网格容器的行和列的大小的网格容器，它是其父级网格容器的一个子项。

设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

4.2、grid-template-columns和grid-template-rows
  • grid-template-columns属性：定义每一列的列宽。
  • grid-template-rows属性：定义每一行的行高。

可使用以下几种方法来定义列宽和行高：

  • 使用具体的像素值或百分比来定义。例如：grid-template-columns: 100px 100px 100px;或grid-template-columns: 33.33% 33.33% 33.33%;。
  • 使用repeat()函数来简化重复的值。例如：grid-template-columns: repeat(3, 33.33%);。我们也可以通过设置第二个参数用于重复某种特定的模式：grid-template-columns: repeat(4, 30px 120px 60px);。
  • 使用auto-fill关键字来表示自动填充。例如：grid-template-columns: repeat(auto-fill, 100px);。有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用 auto-fill 关键字表示自动填充。
  • 使用fr关键字（fraction的缩写，意为“片段”）来划分比例。例如：grid-template-rows: repeat(3,1fr);。如果两列的宽度分别为 1fr 和 2fr，就表示后者是前者的两倍。fr 还可以与绝对长度的单位结合使用，这时会非常方便。如：grid-template-columns: 80px 1fr 4fr;。代码表示，第一列的宽度为 80px，第三列的宽度是第二列的4倍。
  • 使用minmax()函数来定义一个长度范围。例如：grid-template-columns: 1fr 1fr minmax(100px, 1fr);，表示列宽不小于100px，不大于1fr。
  • 使用auto关键字来表示由浏览器自己决定长度。如：grid-template-columns: 80px auto 40px;，代码表示，第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了 min-width，且这个值大于最大宽度。

此外，还可以使用方括号指定每一根网格线的名字，方便以后的引用。例如：grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];。
以下是一个使用命名网格线的完整代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Named Grid Lines Example</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        body {
    font-family: Arial, sans-serif;
}

.grid-container {
    display: grid;
    grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
    grid-template-rows: 100px 100px;
    gap: 10px;
}

.item {
    background-color: lightblue;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 使用命名网格线进行定位 */
.item1 {
    grid-column: c1 / c3;
    grid-row: 1 / 2;
}

.item2 {
    grid-column: c3 / c4;
    grid-row: 1 / 2;
}

.item3 {
    grid-column: c1 / c2;
    grid-row: 2 / 3;
}

.item4 {
    grid-column: c2 / c4;
    grid-row: 2 / 3;
}
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="item item1">Item 1</div>
        <div class="item item2">Item 2</div>
        <div class="item item3">Item 3</div>
        <div class="item item4">Item 4</div>
    </div>
</body>
</html>

效果：
在这里插入图片描述

4.3、gap
  • gap属性（或grid-gap）：用于设置网格单元之间的间隙。可以分别设置列间距和行间距，也可以只设置一个值（此时两个方向的间距相同）。row-gap 属性设置行与行的间隔（行间距），column-gap 属性设置列与列的间隔（列间距）。
  • grid-gap 属性为二者的合并简写形式：
grid-gap: <grid-row-gap> <grid-column-gap>;
4.4、grid-template-areas
  • grid-template-areas属性：用于定义网格区域，并为每个区域命名。可以通过名称而不是行和列的数字来放置Grid项。多个单元格合并成一个区域的写法是，将合并的单元格区域名称写为相同。
  • 语法：grid-template-areas: none | itemnames;
    • none：默认值，表示没有命名的网格区域。
    • itemnames：一个或多个用引号括起来的字符串，每个字符串代表网格的一行。字符串中的每个单词表示一个网格区域的名称，用点（.）表示没有名称的网格项（即空白区域）。

示例：

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header'
    'menu main right'
    'menu footer footer';
}

在上面的示例中，我们定义了一个包含三个区域的网格布局：header、menu、main、right 和 footer。注意，header 区域跨越了三列，而 menu 和 footer 区域则跨越了两列。main 和 right 区域各自占据一列。

合并单元格：

  • 要将多个单元格合并成一个区域，只需在 grid-template-areas 属性中将合并的单元格区域名称写为相同。例如，在上面的示例中，header 区域就是通过将三个单元格的名称都写为 header 来实现的合并。
    命名网格项：
  • 要使用 grid-template-areas 属性，首先需要通过 grid-area 属性为网格项命名。然后，在 grid-template-areas 属性中引用这些名称来定义网格区域。例如：
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

规则与限制：

  • 必须描述一个完整的网格，即必须填充网格上的每个单元格。如果某个单元格留空，则使用点（.）来表示。
  • 每个区域只能定义一次，不能将一个区域的内容复制到网格上的两个位置。
  • 不能创建非矩形区域，因此该属性不能用于创建“L”形或“T”形等不规则形状的区域。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Named Grid Lines Example</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: auto;
            grid-template-areas:
                'header header header'
                'menu main right'
                'menu footer footer';
        }
        .header { grid-area: header; background-color: lightblue; }
        .menu { grid-area: menu; background-color: lightgreen; }
        .main { grid-area: main; background-color: lightcoral; }
        .right { grid-area: right; background-color: lightpink; }
        .footer { grid-area: footer; background-color: lightgray; }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="header">Header</div>
        <div class="menu">Menu</div>
        <div class="main">Main</div>
        <div class="right">Right</div>
        <div class="footer">Footer</div>
    </div>
</body>
</html>

效果：
在这里插入图片描述

4.5、justify-items、align-items和place-items
  • justify-items属性：设置单元格内容的水平位置（左、中、右）。它有以下可能的值：
    • start：将网格项对齐到其单元格的起始边缘（通常是左边缘，但取决于写作模式、方向等）。
    • end：将网格项对齐到其单元格的结束边缘（通常是右边缘）。
    • center：将网格项在其单元格内水平居中。
    • stretch（默认值）：如果网格项的大小没有固定（即没有设置宽度或使用了auto值），则拉伸网格项以填充其单元格的宽度。
  • align-items属性：设置单元格内容的垂直位置（上、中、下）。它的值与justify-items相同，但应用于垂直方向：
    • start：将网格项对齐到其单元格的顶部边缘。
    • end：将网格项对齐到其单元格的底部边缘。
    • center：将网格项在其单元格内垂直居中。
    • stretch（默认值）：如果网格项的大小没有固定（即没有设置高度或使用了auto值），则拉伸网格项以填充其单元格的高度。
  • place-items属性：是align-items属性和justify-items属性的合并简写形式。它允许你同时设置网格项在其单元格内的水平和垂直对齐方式。其值可以是以下之一：
    • 一个单独的值，该值将同时应用于水平和垂直方向（例如，center将网格项在单元格内水平和垂直居中）。
    • 两个值，第一个值用于水平对齐，第二个值用于垂直对齐（例如，start end将网格项对齐到其单元格的左边缘和底部边缘）。
place-items: <align-items> <justify-items>?;

<align-items>：指定元素在容器内的垂直对齐方式。
<justify-items>（可选）：指定元素在容器内的水平对齐方式。如果未提供此值，则使用 <align-items> 的值作为默认值。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Named Grid Lines Example</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 100px);
            place-items: center;
            background-color: lightcoral;
        }
        .grid-item {
            width: 50px;
            height: 50px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item item1">Item 1</div>
        <div class="grid-item item2">Item 2</div>
        <div class="grid-item item3">Item 3</div>
        <div class="grid-item item4">Item 4</div>
    </div>
</body>
</html>

place-items: center：
在这里插入图片描述
place-items: center start：
在这里插入图片描述
place-items: center end：
在这里插入图片描述

4.6、justify-content、align-content和place-content
  • justify-content属性：设置整个内容区域在容器里面的水平位置（左、中、右）。当网格容器的大小大于其内容区域的总大小时，此属性特别有用。它有以下可能的值：
    • start：将内容区域对齐到容器的起始边缘（通常是左边缘）。
    • end：将内容区域对齐到容器的结束边缘（通常是右边缘）。
    • center：将内容区域在容器内水平居中。
    • space-between：在内容区域的每个网格项之间分配空间，但不在第一个网格项之前或最后一个网格项之后分配空间。
    • space-around：在每个网格项周围分配空间，包括第一个网格项之前和最后一个网格项之后的空间，但空间量是减半的。
    • space-evenly：在所有网格项之间以及第一个网格项之前和最后一个网格项之后均匀分配空间。
    • stretch（对于网格布局不是有效的值，因为内容区域不会拉伸以填充容器）。
  • align-content属性：设置整个内容区域的垂直位置（上、中、下）。它的值与 justify-content 相同，但应用于垂直方向：
    • start：将内容区域对齐到容器的顶部边缘。
    • end：将内容区域对齐到容器的底部边缘。
    • center：将内容区域在容器内垂直居中。
    • space-between、space-around 和 space-evenly：与 justify-content 中描述的相同，但应用于垂直方向。
    • stretch（同样不是有效的值，因为内容区域不会拉伸以填充容器）。
  • place-content属性：是align-content属性和justify-content属性的合并简写形式。
place-content: <align-content> <justify-content>?;

<align-content>：指定元素在容器内的垂直（块级方向）对齐及分布方式。
<justify-content>（可选）：指定元素在容器内的水平（内联方向）对齐及分布方式。如果未提供此值，则使用 的值作为默认值。
代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Named Grid Lines Example</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 100px);
            height: 300px;
            width: 600px;
            place-content: center;
            gap: 10px;
            background-color: lightcoral;
        }
        .grid-item {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item item1">Item 1</div>
        <div class="grid-item item2">Item 2</div>
        <div class="grid-item item3">Item 3</div>
        <div class="grid-item item4">Item 4</div>
    </div>
</body>
</html>

place-content: center：
在这里插入图片描述
place-content: space-evenly center：
在这里插入图片描述

4.7、place-items与place-content的区别
  • place-items通常用于控制网格项或网格单元内内容的对齐方式，特别是在你想要确保内容在垂直和水平方向上都有一致的对齐效果时。
  • place-content则通常用于控制多行或多列的对齐及分布方式，特别是在你想要利用额外空间来优化布局效果时。

假设有一个3x3的Grid布局，你想要：

  • 使用place-items: center;来确保所有网格项都在其所在的网格单元内居中对齐。

  • 使用place-content: space-between;来使网格行之间均匀分布空间（假设有多行）。

  • place-items：

    • 可能的值包括start、end、center、stretch等，以及它们的组合（如start center表示垂直方向对齐到起始边缘，水平方向居中对齐）。
    • 效果是使网格项或网格单元内的内容按照指定的对齐方式排列。

  • place-content：

    • 可能的值同样包括start、end、center、stretch等，但还包括space-between、space-around、space-evenly等用于分布的值。
    • 效果是使网格轨道或网格区域内的网格项按照指定的对齐及分布方式排列。特别是当存在多行或多列时，place-content可以控制这些行或列如何在容器内分布。
4.8、grid-auto-flow

grid-auto-flow 是 CSS Grid 布局中的一个属性，它定义了网格中自动放置项（即那些没有明确放置在命名网格区域中的项）的流动方向和方式。这个属性对于控制网格项如何填充未明确指定的网格空间非常有用。

grid-auto-flow 可以接受以下值：

  • row（默认值）：
    • 网格项将按行进行填充，从左到右，然后从上到下。
    • 这是最常见的用法，特别是当网格项的布局更自然地适应水平流动时。
  • column：
    • 网格项将按列进行填充，从上到下，然后从左到右。
    • 这在需要垂直流动的布局中很有用，比如一些垂直滚动的列表或瀑布流布局。
  • row dense 和 column dense：
    • 这些值类似于 row 和 column，但它们会尝试填满网格中的空白空间，而不是按照顺序简单地放置项。
    • 使用 dense 关键字，Grid 布局算法会尝试最小化网格中的空洞，通过将项“拉入”已经部分填充的行或列中来实现。
  • auto（在某些上下文中可用，但通常不直接用于 grid-auto-flow）：
    • 在某些情况下，auto 值可以与其他属性（如 grid-auto-columns 和 grid-auto-rows）结合使用，以定义自动放置项的大小和流动方向。
    • 然而，auto 通常不是 grid-auto-flow 的直接值；它更多地是在其他网格相关属性中发挥作用。

需要注意的是，grid-auto-flow 属性的效果会受到其他 Grid 属性的影响，特别是那些定义网格容器尺寸、网格线命名和网格区域命名的属性。

在使用 grid-auto-flow 时，通常还需要定义 grid-template-rows 和 grid-template-columns（或它们的简写形式 grid-template），以及可能的 grid-auto-rows 和 grid-auto-columns，来完全控制网格的布局。

最后，值得注意的是，grid-auto-flow 是一个相对较新的 CSS 属性，并且随着 CSS Grid 布局的规范发展，它的行为可能会发生变化。因此，在实际使用中，建议查阅最新的浏览器兼容性信息和规范文档。

5、Grid布局的项目属性

5.1、指定项目位置
  • grid-area属性：指定项目放在哪一个区域，与容器定义区域配合使用。也可以用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。
  • grid-column-start和grid-column-end属性：分别指定项目在网格中的起始列和结束列。
  • grid-row-start和grid-row-end属性：分别指定项目在网格中的起始行和结束行。
5.2、设置单元格内容的自我定位
  • justify-self属性：设置单元格内容的水平位置（左、中、右），只作用于单个项目。
  • align-self属性：设置单元格内容的垂直位置（上、中、下），只作用于单个项目。
  • place-self属性：是justify-self（水平对齐）和align-self（垂直对齐）的合并简写形式。place-self可以接受以下值：
    • start：将网格项与其网格单元的起始边缘对齐。
    • end：将网格项与其网格单元的末端边缘对齐。
    • center：将网格项在其网格单元内居中对齐。
    • stretch：默认值，网格项将拉伸以填充整个网格单元的宽度（或高度，取决于对齐的轴）。
    • auto：使用布局模式的默认对齐方式。

此外，还可以使用两个值来分别设置水平和垂直对齐，例如place-self: center start;，其中center设置水平对齐为居中，start设置垂直对齐为起始边缘对齐。

6、总结

Grid布局以其强大的功能和灵活性，成为了实现复杂布局的首选方案。

三、其他

1、Flex布局练习网站

https://flexboxfroggy.com

2、Grid布局练习网站

https://cssgridgarden.com

3、谷歌浏览器调试Flex布局

先给元素加display: flex;：

#box1{
  display: flex;
}

然后就可以在谷歌浏览器的Elements里面，点击flex进行调试：
在这里插入图片描述

标签
#前端 #css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
玩转flex和grid布局 玩转flex和grid布局，从概念到demo上手 阅读详情

相关推荐

【前端知识之CSS】flex弹性布局和grid网格布局

本系列主要整理前端面试中需要掌握的知识点。本节介绍flex弹性布局和grid网格布局。

weixin_44337386的博客 2661

Flex布局及Grid布局

Flex与Grid布局

obj_obj_baby的博客 7488

Flex布局和Grid布局的区别是什么？

在现代Web前端开发中，布局系统作为用户界面构建的基石，直接影响着应用的可用性、美观度和性能表现。CSS Flexible Box (Flexbox) 和 CSS Grid Layout (Grid) 作为两种革命性的布局模型，彻底改变了传统布局方案的局限性。本文将从第一性原理出发，系统剖析这两种布局模型的理论基础、数学原理、架构设计与实现机制，通过多维度对比揭示其本质差异与适用场景。

AI天才研究院 223

响应式布局内容

响应式布局 课堂目标 掌握flex布局 掌握网格布局 掌握响应式布局 知识点 flex 布局（弹性布局）参考 分为主轴（main axis）和交叉轴（cross axis） flex容器属性： flex-direction：设置主轴的方向，默认 row row（默认值）：主轴为水平方向，起点在左端 row-reverse：主轴为水平方向，起点在右端 column：主轴为垂直方向，起点在上沿 column-reverse：主轴为垂直方向，起点在下沿 flex-wrap：定义换行方式，默认不

Shelia_的博客 1277

告别抓包失败！保姆级配置：让Burp+Proxifier稳定抓取任意微信小程序

本文提供了一套完整的Burp+Proxifier配置方案，确保稳定抓取微信小程序数据。从环境准备、工具选型到Burp Suite深度配置和Proxifier精准设置，详细解决了证书安装、进程捕获和乱码解析等核心问题，帮助开发者告别抓包失败，提升调试效率。

weixin_28738165的博客 452

别再为UE5像素流部署踩坑了！Windows服务器单实例保姆级避坑指南（含Node.js证书、coturn空文件夹等常见问题解决）

本文提供了UE5像素流在Windows服务器单实例部署中的全面解决方案，涵盖Node.js证书过期、coturn空文件夹等常见问题。通过详细的步骤指导和配置建议，帮助开发者高效完成部署，避免常见陷阱，特别适合局域网环境下的应用场景。

weixin_30315435的博客 462

flex和grid布局的差别

flex 布局 什么是 flex 布局 全成 flexible Box 意为弹性盒子。 弹性盒子是 CSS3 的一种新的布局模式。相对于传统的依赖于display+position+float的布局方式，弹性盒子更加以有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 如何使用 // 任何一个容器都可以指定为Flex布局，你需要的仅仅是增加一行 display: flex; // 如果是行内元素的话则是 display: inline-flex; 注意，设为 Flex 布局以后，子元素的fl

qq_45371853的博客 6400

CMOS传输门（互补开关）实战指南 | 设计优化 + 常见问题解析

本文深入解析CMOS传输门（互补开关）的设计优化与常见问题，涵盖导通特性、版图设计、高频应用及混合信号设计等关键领域。通过实测数据和优化技巧，帮助工程师解决衬底连接、信号完整性等实际问题，提升数字和模拟混合信号设计的效率与可靠性。

weixin_29229989的博客 161

flex布局和grid布局

flex布局，也被称之为弹性盒子，是css3里面新增的一种布局方式，通过使用flex布局，我们可以让布局更加便捷、高效。

rzl02的博客 1418

数据中心GPU芯片性能参数速查表（Nvidia+国产算力卡）

本文提供了一份数据中心GPU芯片性能参数速查表，涵盖Nvidia与国产算力卡两大阵营。文章详细解读了算力、显存、互连技术及功耗等关键性能指标，并对比了A100、H100、昇腾910B等主流型号，旨在帮助用户根据AI训练、推理等实际场景，做出高效的硬件选型与成本评估决策。

a0b1c2d3的专栏 835

Mujoco xml actuator

在MuJoCo中，actuator（执行器） 是用于定义外部力或力矩的机制，这些力或力矩可以作用于关节、肌腱或身体。执行器可以模拟各种类型的驱动器，如电机、液压缸、肌肉等。它们通过定义传输（transmission）和力生成机制（force generation）来实现对模型的控制。

m0_52113469的博客 2893

Grid 布局和 Flex 布局有哪些区别？？？

Grid 布局和 Flex 布局是 CSS 中两种强大的布局工具，它们各有特点和适用场景。

YSbnhoffer的博客 2059

VSCode 中搭建 Python 开发环境

**验证安装**：打开终端（CMD/PowerShell/终端），输入 `python --version`（Windows）或 `python3 --version`（macOS/Linux），显示版本号即成功。- **下载地址**：[Python 官网](https://www.python.org/downloads/)（选择对应系统的最新稳定版，推荐 3.8+）- **调试**：通过 `launch.json` 配置，设置断点后按 `F5` 启动，使用 `F10/F11` 控制流程。

寒寒豆豆软件公司的博客 2534

CSS拓展——Flex布局和Grid网络布局

CSS拓展——Flex布局和Grid网络布局

qq_52957637的博客 2195

【1】Java 部分笔试题解析

解析A.abstract关键字应该放在class关键字之前。C.抽象方法不能有方法体。D缺少了class关键字。

博客 3940

用 CL_ABAP_ZIP 在 ABAP 里打包任意文件：从前端多选到 ZIP 交付的一条龙实践

本文介绍了在SAP ABAP中实现文件打包交付的完整解决方案。文章首先区分了ZIP和GZIP的不同用途：ZIP用于多文件归档，GZIP用于单数据流压缩。核心流程包括四个步骤：文件选择、二进制上传、内存打包和ZIP输出，并提供了关键对象与函数的速查表。针对实际项目中常见的乱码、大文件处理等问题给出了解决方案，最后展示了一个完整的可运行示例代码，涵盖了从文件选择到下载的全流程实现。该方案适用于财务、质量、运维等多种业务场景，能够有效解决多文件交付的最后一公里问题。

2007 年 ~ 2025 年，深耕 SAP 技术 18 年 215

了解flex布局和grid布局

Flexible Box 模型，通常被称为 flexbox（弹性布局），是一种一维的布局模型。//块级元素//行内元素flex布局支持6个容器属性：属性网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列。//块级元素//行内元素。

qq_41367352的博客 1961

WINCC7.3破解文件

WINCC7.3硬件够破解文件，有需要的下载！WINCC7.3硬件够破解文件，有需要的下载！

CSS布局——Flex布局和Grid布局

在上面的代码中，.container是Flex容器，通过设置将其定义为Flex容器，并使用和属性将Flex项目在主轴和交叉轴上居中排布。.item是Flex项目，通过设置flex: 1;实现项目的灵活伸缩，并设置margin属性实现项目之间的间距。

kaisersama__的博客 1302

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android：LinePhone3.2.7(最新版本)，官网地址：http://www.linphone.org/

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

flex弹性布局和grid布局

flex-shrink取值为1时依旧会失去宽度。

dxy060518的博客 866

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

Flex和Grid布局

CSS 布局经历了从 float 到 flex 再到 grid 的演进过程，逐步解决了开发中的痛点。

nailixiaomianbao的博客 831

flex弹性布局和Grid布局

给父元素添加display属性；取值flex，即1)父元素触发弹性盒子之后，子元素默认横向显示父元素触发弹性盒子之后，子元素会横向显示，类似于浮动，但不是浮动，与浮动无关系不影响孙子辈份的元素2)触发弹性盒子之后，会改变子元素的元素类型，会让子元素变成块状元素3)触发弹性盒子之后，如果只有一个子元素，给子元素添加margin:auto的时候，子元素会位于水平垂直居中位置显示默认情况下项目都是纵向排列的原因：项目为块状元素，块级本质就是纵向排列在触发弹性盒子之后：项目默认横向显示，

2403_88257284的博客 1485

flex和grid布局

不压缩压缩。

2401_87902107的博客 1370
上一篇： Web蓝桥杯刷题：真题集锦【大学组】
下一篇： JavaScript遍历数组的7种方式
点赞 24
评论 0
书签 书签 20
testleaf
testleaf
博客等级 码龄7年 3514粉丝 72原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

testleaf

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值