Imagine this as the structure of my HTML, with an unspecified number of div elements:
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
My goal is to utilize Flexbox for organizing the elements in groups of 3 per row.
https://i.sstatic.net/9oeCX.png
This CSS code successfully achieves the layout I desire:
html, body {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
div {
width: 30%;
height: 20%;
border: solid;
}
However, defining size using percentages can sometimes be cumbersome. Is there an alternative way to write the CSS without using percentage values?
After removing width:100% from html and body, the layout appears distorted:
https://i.sstatic.net/tmsEe.png
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>