如何在不使用百分比（％）的情况下确定弹性商品的大小？
[英]How to determine the size of flex items without using percents (%)?
问题描述
Let's suppose that this is my HTML, meaning I have an unknown number of div elements: 
假设这是我的HTML，这意味着我有数量未知的div元素：
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
I want to use Flexbox to arrange the elements in a way that each row includes only 3 elements. 我想使用Flexbox以每行仅包含3个元素的方式排列元素。
This is the CSS code that I wrote that can make it: 这是我编写的CSS代码，可以做到：
html, body {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
div {
width: 30%;
height: 20%;
border: solid;
}
Using percents to define size may be sometimes cumbersome. 使用百分比定义大小有时可能很麻烦。 I want to ask if there is a way to write the CSS code in this case without using percents. 我想问一下是否有一种在不使用百分比的情况下编写CSS代码的方法。
When I remove width:100% from html and body , I get something weird: 当我从html和body删除width:100% ，我得到了一些奇怪的东西：
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>
2 个解决方案
解决方案1
1 已采纳 2017-04-13 15:49:49
I want to ask if there is a way to write the CSS code in this case without using percents.
Yes, as being said, there is more than percent, like em , rem , vw / vh , that can be used, though I personally find % to be one of the better, as it help you to scale your site very well. 是的，正如所说的那样，可以使用的百分比不止这些，例如em ， rem ， vw / vh ，尽管我个人认为%是更好的%之一，因为它可以帮助您很好地扩展网站。
Using percents to define size may sometimes be cumbersome.
width: 100%fromhtml, bodyrule and I got something very ugly.width: 100%的html, body规则，但我得到了非常难看的东西。
Yes, though that is expected behavior, as the body does not behave as a standard block element in HTML5 and set as display: flex; 是的，尽管这是预期的行为，因为body在HTML5中不充当标准的块元素，而设置为display: flex; , Is body element a block level or inline element , which the html elements does. ， 是body元素是 html元素执行的块级还是inline元素 。
So when we know that, we can utilize flexbox 's properties properly, by doing something like this, where we make the html element the first flex container, the body its flex item and as well the second flex container, for the div elements. 因此，当我们知道这一点时，我们可以通过执行类似的操作来正确利用flexbox的属性，在其中，我们将html元素作为第一个flex容器，将body作为其flex项，并将第二个flex容器作为div元素。
In addition, to overcome the issue using percent on height, where all ancestors need a height, I used viewport units vh . 此外，要克服所有祖先都需要高度的高度百分比问题，我使用了视口单位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>
I would recommend though, to use a div , instead of the body , as a container 我还是建议使用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; }
<div class="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
解决方案2
1 2017-04-13 15:57:23
Since you're sizing your flex items based on the full height and width of the body element, you can use viewport units instead of percentage units : 由于您是根据body元素的整个高度和宽度来调整弹性项目的大小，因此可以使用视口单位，而不是百分比单位 ：
body { display: flex; flex-wrap: wrap; } div { flex: 1 0 30vw; height: 20vh; border: solid; }
<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>
From the spec: 从规格：
5.1.2.
vw,vh,vmin,vmaxunitsvw，vh，vmin，vmax单位The viewport-percentage lengths are relative to the size of the initial containing block.
- vw unit - Equal to 1% of the width of the initial containing block.
- vh unit - Equal to 1% of the height of the initial containing block.
- vmin unit - Equal to the smaller of
vworvh.vw或vh的较小者。- vmax unit - Equal to the larger of
vworvh.vw或vh的较大者。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.