Question

让我们假设这是我的HTML，这意味着我有一个未知数量的div元素：

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

我想使用Flexbox以每行仅包含3个元素的方式排列元素。

这是我写的CSS代码：

html, body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

div {
  width: 30%;
  height: 20%;
  border: solid;
}

使用百分比来定义大小有时可能很麻烦。我想询问是否有办法在不使用百分比的情况下编写CSS代码。

当我从width:100%和html移除body时，我感到很奇怪：

html, body {
  /*width: 100%;*/
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

div {
  width: 30%;
  height: 20%;
  border: solid;
}

<html>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>

Answer 1

我想问一下在这种情况下是否有办法编写CSS代码没有使用百分数。

是的，正如所说的那样，可以使用em，rem，vw / vh等百分比，但我个人认为{ {1}}是最好的之一，因为它可以帮助您很好地扩展您的网站。

使用百分比来定义大小有时可能很麻烦。对于例如，我从%规则中删除了width: 100%，我得到了一些东西非常难看。

是的，虽然这是预期的行为，因为html, body不像HTML5中的标准块元素那样设置为body，Is body element a block level or inline element，display: flex;元素呢。

因此，当我们知道这一点时，我们可以正确地利用html的属性，通过这样做，我们将flexbox元素作为第一个flex容器，html flex项目以及第二个flex容器，用于body元素。

此外，为了克服使用高度百分比的问题，所有祖先都需要高度，我使用了视口单元div。

vh

html {
  display: flex;
}

body {
  flex: 1;                         /*  expand and take all available space */
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

div {
  width: 30%;
  height: 20vh;                    /*  20vh equals 20% of the viewport */
  border: solid;
}

我建议使用<body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body>而不是div作为容器

body

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.container div {
  width: 30%;
  height: 20vh;                    /*  20vh equals 20% of the viewport */
  border: solid;
}

Answer 2

由于您根据body元素的完整高度和宽度调整了flex项目的大小，因此您可以使用 视口单元 而不是 百分比单位 ：

＆＃13;

body {
  display: flex;
  flex-wrap: wrap;
}

div {
  flex: 1 0 30vw;
  height: 20vh;
  border: solid;
}

＆＃13;

<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>

＆＃13;

来自规范：

5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units

视口百分比长度是相对于的大小   初始包含块。当初始的高度或宽度   包含块被更改，它们会相应缩放。


vw unit - 等于初始包含块宽度的1％。

vh单位 - 等于初始包含高度的1％   块。

vmin unit - 等于vw或vh中的较小者。

vmax单位 - 等于vw或vh中的较大者。

如何在不使用百分比（％）的情况下确定弹性项目的大小？

2 个答案: