如何使用 Flexbox 和 CSS 创建响应式方形网格？-css教程-PHP中文网

如何使用 Flexbox 和 CSS 创建响应式方形网格？

Barbara Streisand

发布： 2024-11-26 04:40:08

原创

432 人浏览过

How Can I Create a Responsive Square Grid Using Flexbox and CSS?

使用 Flexbox 的 CSS 网格

了解 Flexbox 中的高度和宽度

Flexbox 允许您设置使用 flex 属性的元素。但是，它不控制元素的高度。 Flexbox 将默认在元素之间均匀分配可用高度。

创建正方形网格

要实现正方形网格，正方形的高度和宽度都可以必须相等。为此：

设置纵横比： CSS 纵横比属性可用于定义宽度和高度之间的固定比率。对于正方形，将长宽比设置为 1 / 1。

.flex-item {
  aspect-ratio: 1 / 1;
}

登录后复制

响应式网格

创建自动调整为视口宽度的响应式网格:

将 Flex 设置为 1 0 auto: 这允许元素增长以适应宽度，但防止它们收缩到原始宽度以下。

.flex-item {
  flex: 1 0 auto;
}

登录后复制

设置容器宽度： 为父容器指定固定或百分比宽度，以限制父容器的总宽度

.flex-container {
  width: 100%;
  max-width: 800px;
}

登录后复制

完整代码

<body>
  <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
  </div>
</body>

登录后复制

.flex-container {
  width: 100%;
  max-width: 800px;
  display: flex;
  justify-content: space-around;
  height: 50px;
  line-height: 30px;
}

.flex-item {
  background: tomato;
  margin: 5px;
  color: white;
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
  flex: 1 0 auto;
  aspect-ratio: 1 / 1;
}

登录后复制

以上是如何使用 Flexbox 和 CSS 创建响应式方形网格？的详细内容。更多信息请关注PHP中文网其他相关文章！