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

CSS 中的网格和 Flex 布局

WBOY

发布： 2024-09-06 14:31:02

原创

1029 人浏览过

Grid and Flex Layout in CSS

介绍

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 像素列。 如果还有剩余空间，它将在各列之间平均分配。

自动调整：

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

.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 {
    ...
  }
}

登录后复制

以上是CSS 中的网格和 Flex 布局的详细内容。更多信息请关注PHP中文网其他相关文章！