css 带有 flexbox 的正方形网格

Question

我正在尝试创建响应式正方形网格。正方形应调整大小以适合视口的宽度。更改视口的高度时，方块不应调整大小。

我知道如何调整每个正方形的宽度，但我不知道如何使元素变成正方形以及如何在视口宽度变化时缩放它们的高度。

在下方 fiddle 的示例中，七个正方形应始终水平放置，并且应按正方形缩放。我不在乎有多少行可见。

Fiddle 这里 http://jsfiddle.net/gonyhvz8/11/

<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>
<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>
<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>
<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>
<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>
<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>
<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>

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row;
  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 0px;
  height: auto;
}

Answer 1

保持纵横比的常用技巧是利用这样一个事实，即边距 and/or 填充顶部和底部的百分比值是根据包含元素的宽度而不是高度计算的。

你可以看到这个问题的非弹性版本HERE

但是，您希望 flex 处理元素的宽度，而不是设置基于百分比的宽度。为此，我想出了一种适用于 flex 的方法的变体：

.flex-item:before {
    content: "";
    display: block;
    padding-top: 100%;
    float: left;
}

这里的技巧是使用 :before 伪元素插入宽度为 0 且 padding-top 为 100% 的元素。 100% 是宽度的 100%，这意味着这个没有内容的元素将与其容器一样高。这会将弹性项目拉伸到与其宽度相同的高度：

此外，您需要从弹性容器中移除定义的高度，否则高度将无法增长。您可能还想添加 min-width: 1.5em，这样您的元素就不会缩小到低于每个方块中字符的高度。

http://jsfiddle.net/gonyhvz8/14/

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row;
    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 0px;
    min-width: 1.5em;
}
.flex-item:before {
    content: "";
 display: block;
 padding-top: 100%;
    float: left;
}

<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>
    <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>
    <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>
    <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>
    <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>
        <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>
        <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>

Answer 2

edit 2022 如今，纵横比变得广泛可用。设置宽度或高度，然后对于正方形使用 1/1 比率：aspect-ratio: 1 / 1 ;

资源：

教程https://css-tricks.com/almanac/properties/a/aspect-ratio/
描述https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
理解它的浏览器https://caniuse.com/?search=aspect-ratio

snippets 变为 （注意：没有设置宽度和高度，因为我们处于 flex 布局中并且 flex-grow 设置为 1 flex: 1 0 auto;，正在执行调整大小的工作）:

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: space-around; 
}
.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 ;
}

/* Item can be any kind of box from here . flex/grid/block */
.flex-item {display:grid;align-items:center;justify-content:center;}

<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>
    <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>
    <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>
    <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>
    <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>
    <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>
    <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 {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row;
    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-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>
    <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>
    <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>
    <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>
    <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>
    <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>
    <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>

一个inline-block element could do too, just adapt the display/behavior of the box and it's content. the magic here comes from padding:50% 0; (100% vertical padding equals width of parent). see w3c about vertical margin and padding

[edit 07/2021]关于将内容集中在该正方形内以供需要此内容的人使用 (make the square itself a flex boxe too):

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row;
    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;
    
    display:flex;
    align-items:center;
    justify-content:center;
}
.flex-item::before {
    content:'';
    padding-top:100%;
}

<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>
    <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>
    <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>
    <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>
    <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>
    <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>
    <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>

您可能还会觉得有趣： & 如果这个答案不能完全满足您的广场需求 ;)

Answer 3

使用 flexbox 固然很好，但是提到的解决方案即使使用 flexboxes 也缺乏灵活性。您无法调整框的浮动。您之前必须设置每行的框数。

在此解决方案中，您可以调整 tiles/square 的动态宽度并根据需要浮动它们。如果你用 flexboxes 尝试这个，你会遇到 padding-top 的问题，因为它没有定位在包含块的给定宽度上。

Solution without flexboxes but more flexability:

.flex-container {
  padding: 0;
  margin: -5px;
  font-size: 0;
  font-family: Helvetica, Arial, sans-serif;
}

.flex-item {
  position: relative;
  display: inline-block;
  height: 0;
  width: 100%;
  padding-top: 100%;
  height: auto;
  font-size: 20px;
  color: white;
  font-weight: bold;
  text-align: center;
}
@media (min-width: 480px) {
  .flex-item {
    width: 33.3333%;
    padding-top: 33.3333%;
  }
}
@media (min-width: 768px) {
  .flex-item {
    width: 25%;
    padding-top: 25%;
  }
}
.flex-item-inner {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 10px;
  background: tomato;
}

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

Link 到代码笔：http://codepen.io/dailysh-it/pen/xOVydO

Answer 4

对于那些也想在方形 div 中使用 display: flex 的用户，您需要对 :before 元素使用 display: table，否则方形将与 [=25= 一起使用] 但不适用于 Firefox 或 Edge（自 Firefox 47 和 Edge 13 起）。

在应该适用于所有浏览器的下面的代码片段中，我还演示了如何使用百分比列（在本例中为 20%）包装无限项目并使用填充和内部 div 分隔它们，因为百分比边距不会在 FF 中正常工作，当然还有 Edge。

.flex-container {
  display: flex;
  justify-content: start;
  flex-wrap: wrap; 
}

.flex-cell {
  flex: 0 0 20%;
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: 0.5rem;
  box-sizing: border-box;
}

.flex-cell:before {
  content: '';
  display: table;
  padding-top: 100%;
}

.flex-item {
  flex-grow: 1;
  border: 1px solid black;
  background: tomato;
  color: white;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

<body>
    <div class="flex-container">
        <div class="flex-cell">
            <div class="flex-item">1</div>
        </div>
        <div class="flex-cell">
            <div class="flex-item">2</div>
        </div>
        <div class="flex-cell">
            <div class="flex-item">3</div>
        </div>
        <div class="flex-cell">
            <div class="flex-item">4</div>
        </div>
        <div class="flex-cell">
            <div class="flex-item">5</div>
        </div>
        <div class="flex-cell">
            <div class="flex-item">6</div>
        </div>
        <div class="flex-cell">
            <div class="flex-item">7</div>
        </div>
        <div class="flex-cell">
            <div class="flex-item">8</div>
        </div>
        <div class="flex-cell">
            <div class="flex-item">9</div>
        </div>
        <div class="flex-cell">
            <div class="flex-item">10</div>
        </div>
        <div class="flex-cell">
            <div class="flex-item">11</div>
        </div>
        <div class="flex-cell">
            <div class="flex-item">12</div>
        </div>
    </div>
</body>

Answer 5

有一种方法可以不使用额外的 html 元素。我用你的代码库 http://jsfiddle.net/octavioamu/kq97pm3L/ 创建了一个 fiddle 但勾号是在 elemento 之后使用 display table

flex-item:after {
    content: ' ';
    padding-top: 100%;
    display: table;
}

您可以在任何网格中使用它，例如 bootstrap... 这是一个在 % 网格列 https://codepen.io/octavioamu/pen/xzeXGm

中工作的 sass mixin

这是您的代码：

.flex-container {
  display: flex;
}

.flex-item {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  background-color: red;
  margin: 5px
}

.flex-item:after {
  content: ' ';
  padding-top: 100%;
  display: table;
}

<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>
  <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>
  <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>
  <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>
  <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>
  <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>
  <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>

Answer 6

G-Cyr 的答案简化版

.flex-container {
  display: flex;
  flex-flow: row;
  justify-content: center;
}

.flex-item {
  background: tomato;
  margin: 10px;
  max-width: 50px;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0;
  height: auto;
}

.flex-item:before {
  /* The psuedo-element's padding-top percentage is based on the element's width. */
  padding-top: 100%;
  content: '';
  float: left;
}

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>
<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>
<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>
<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>

css 带有 flexbox 的正方形网格

css grid of squares with flexbox

css

responsive-design

flexbox

G-Cyr 的答案简化版

结果