103 lines
1.8 KiB
HTML
103 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Flexbox examples</title>
|
|
</head>
|
|
|
|
<style>
|
|
|
|
.separator {
|
|
height: 20px;
|
|
border: 0px;
|
|
}
|
|
span {
|
|
background-color: aqua;
|
|
width: 80px;
|
|
height: 40px;
|
|
border: 1px dotted blue;
|
|
margin: 10px;
|
|
padding: 10px;
|
|
|
|
/* This flex is only for vertical centering of text in span*/
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
div {
|
|
border: 1px dashed red;
|
|
}
|
|
|
|
.flex-centered {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.flex-row {
|
|
display: flex;
|
|
height: 200px;
|
|
align-content: flex-end;
|
|
flex-flow: row wrap;
|
|
}
|
|
|
|
.flex-row span {
|
|
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>
|
|
<body>
|
|
|
|
<div class="flex-centered">
|
|
|
|
<span>centered</span>
|
|
|
|
</div>
|
|
|
|
<div class="separator"></div>
|
|
|
|
<div class="flex-row">
|
|
<span>1</span>
|
|
<span>2</span>
|
|
<span>3</span>
|
|
<span>4</span>
|
|
<span>5</span>
|
|
<span>6</span>
|
|
</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>
|
|
</html> |