CSS 中的网格和 Flex 布局-css教程-PHP中文网

css 中的网格和 flex 布局

介绍

flexbox 和网格布局都是强大的布局。

弹性盒：

flexbox 是一种一维布局模型，最适合在单行或单列中排列元素。
当元素的大小或容器的大小未知时，flexbox 特别有用。
它非常适合水平和垂直对齐项目，并且对于创建导航栏、侧边栏或工具栏非常有用。

css 网格：

网格是一种二维布局模型，最适合同时将元素排列成行和列。
它非常适合创建复杂的布局，并且可以同时处理列和行，这使其成为构建复杂页面布局的不错选择。

网格布局详细

grid-template-columns: repeat(3, 1fr);
grid-template-row: repeat(3, auto);
grid-column: 1/3
grid-row: 1/4

行覆盖

repeat(3, minmax(200px, 1fr)) 语句创建三行（或列，具体取决于使用位置），每行的最小尺寸为 200px，最大尺寸为 1fr。
1fr 单位表示网格容器中可用空间的一小部分。因此，如果容器的大小超过所有行的总最小大小（在本例中为 600px），则剩余空间将在行之间平均分配。

repeat(3, minmax(200px 1fr))

自动调整和自动填充

css 网格中的自动填充和自动调整关键字控制当网格项不占用网格容器中的额外空间时网格的行为方式。

自动填充

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

在此示例中，网格将创建容器中能够容纳的尽可能多的 100 像素列。 如果还有剩余空间，它将在各列之间平均分配。

自动调整：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

这个关键字还告诉网格创建尽可能多的轨道，但它会折叠空轨道，因此网格末尾没有空轨道。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

在此示例中，网格将创建容器中能够容纳的尽可能多的 100 像素列。 如果还有剩余空间，它将在各列之间平均分配，并且任何空列都将被折叠。

子网格

当您希望网格项成为网格容器并与其父网格对齐时，将使用 css 网格布局中的子网格值。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.item {
  display: grid;
  grid-template-columns: subgrid;
}

注意：-

当您希望嵌套网格与父网格对齐时，这会很有用。
但是，子网格并未在所有浏览器中得到广泛支持。

容器查询

集装箱尺寸查询

宽度媒体查询考虑视口宽度但容器大小查询考虑容器宽度容器是被查询的元素。

规则：-

规则仅对容器后代有效而不是容器本身
容器大小查询是响应式设计的补充，而不是媒体查询的替代品。

<article class="card"><h2>That's No Moon. It's a Space Station.</h2>
    <p class="text">At 198km diameter, Mimas is bigger than the first Death Star (120km) but smaller than the second (800km). </p>
    <p class="link"><a href="https://science.nasa.gov/saturn/moons/mimas/" target="_blank" class="button">More about Mimas</a></p>
  </article><!-- we can't query cards in container query so only work with descendants--><!-- Workaround solution would be check below--><div class="card">
<article><h2>That's No Moon. It's a Space Station.</h2>
    <p class="text">At 198km diameter, Mimas is bigger than the first Death Star (120km) but smaller than the second (800km). </p>
    <p class="link"><a href="https://science.nasa.gov/saturn/moons/mimas/" target="_blank" class="button">More about Mimas</a></p>
  </article>
</div>

.card {
  container-name: card;
  container-type: inline-size;
}

@container card (min-width: 200px) {
  article {
    background-color: red;
  }
}

@container card (min-width: 250px) {
  article {
    ...
  }
}

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！