时间戳

首页 > 解决方案 > 如何仅使用 CSS 创建带正方形的网格，同时尊重最大宽度和高度？

html - 如何仅使用 CSS 创建带正方形的网格，同时尊重最大宽度和高度？

问题描述

我正在尝试创建一个如下图所示的“网格”。我正在使用 React、Sass 和 EC6。我面临的问题是：

该图像显示了一个 9 行和 9 列的示例，但这可以更改为（几乎）任何内容。例如，可能有 3 行 10 列，或 5 行 2 列。但我需要内容始终显示在屏幕上，即容器具有最大宽度和高度。 网格状显示[1]

我希望中间的正方形始终是正方形，同时尽可能大地显示内容（没有固定的宽度和高度）。

如果我有例如 6 列和 2 行，我需要正方形的宽度和高度与最大宽度的 100/6 相同。

但是如果我翻转数字，并且有 2 列和 6 行，我希望正方形的大小为最大高度的 100/6。

我尝试了几种 CSS 方法，比如使用 flexbox，但都没有成功。

示例： https ://codepen.io/maffekill/pen/ZNZwXz

有没有办法在不使用 JS 的情况下解决这个问题？

.flex-container{
  height:100px;
  display:flex;
  flex-flow:column;
  border:1px solid black;
}

.flex-row {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around;
   
    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;
    height:auto;
}
.flex-item:before {
    content:'';
    float:left;
    padding-top:100%;
}
<body>
  <div class="flex-container">
    <div class="flex-row">
      <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 class="flex-item">8</div>
    </div>
    <div class="flex-row">
      <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 class="flex-item">8</div>
    </div>
  </div>
</body>

此方法不考虑高度。

现在我知道我可以在 JS 中计算出所有的宽度和高度，然后相应地更改为 CSS，但这不会像纯 CSS 那样简洁，而且需要大量额外的资源。有没有办法在不使用 JS 的情况下使用纯 CSS/HTML 来做到这一点？

PS这是我在堆栈上的第一个问题，如果有不清楚的地方，请随时发表评论；）

标签： htmlcssflexbox

解决方案

.container{
min-width: 100%;
max-width: 100%;
}
<div class = "container">
</div>

你可以做类似的事情来让你的容器总是 100% 宽度。

推荐阅读