How to determine the size of flex items without using percents (%)?
Question
Let's suppose that this is my HTML, meaning I have an unknown number of div elements:
<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.
This is the CSS code that I wrote that can make it:
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.
When I remove width:100% from html and body , I get something weird:
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 answers
solution1
1 ACCPTED 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.
Using percents to define size may sometimes be cumbersome. For example, I deleted
width: 100%fromhtml, bodyrule and I got something very ugly.
Yes, though that is expected behavior, as the body does not behave as a standard block element in HTML5 and set as display: flex; , Is body element a block level or inline element , which the html elements does.
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.
In addition, to overcome the issue using percent on height, where all ancestors need a height, I used viewport units 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
.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>
solution2
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 { 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. Viewport-percentage lengths: the
vw,vh,vmin,vmaxunitsThe viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
- 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.- vmax unit - Equal to the larger of
vworvh.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.