jknetl/html-css-playground
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add example of n-column flexbox

Browse Source
This commit is contained in:
Jakub Knetl
2024-01-16 08:38:56 +01:00
parent 64028b20f8
commit 496a09bd13
1 changed files with 34 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
flexbox/flex.html
View File

@@ -14,7 +14,7 @@
span { span {
background-color: aqua; background-color: aqua;
width: 80px; width: 80px;
height: 80px; height: 40px;
border: 1px dotted blue; border: 1px dotted blue;
margin: 10px; margin: 10px;
padding: 10px; padding: 10px;
@@ -35,17 +35,31 @@
justify-content: center; justify-content: center;
} }
.flex-rows { .flex-row {
display: flex; display: flex;
height: 200px; height: 200px;
align-content: flex-end; align-content: flex-end;
flex-flow: row wrap; flex-flow: row wrap;
} }
.flex-rows span { .flex-row span {
flex-grow: 1; flex-grow: 1;
} }
.flex-n-per-row {
display: flex;
height: 350px;
flex-flow: row wrap;
/*justify-content: space-between;*/
}
.flex-n-per-row span {
/* the key trick here is the flex-basis 24% which is just below 1/4 => 4 elements would fit on the page
in case there is no padding and margin (that is distrubuted separately)
*/
flex: 1 0 24%;
}
</style> </style>
@@ -59,7 +73,7 @@
<div class="separator"></div> <div class="separator"></div>
<div class="flex-rows"> <div class="flex-row">
<span>1</span> <span>1</span>
<span>2</span> <span>2</span>
<span>3</span> <span>3</span>
@@ -68,6 +82,22 @@
<span>6</span> <span>6</span>
</div> </div>
<div class="separator"></div>
<div class="flex-n-per-row">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
</div>
</body> </body>
</html> </html>