flex-by-examples-1
revision:
Content
photo gallery examples
top
flex-direction row
code:
<main class="cards">
<img src="../images/1.jpg" alt="Sample photo">
<img src="../images/2.jpg" alt="Sample photo">
<img src="../images/3.jpg" alt="Sample photo">
<img src="../images/4.jpg" alt="Sample photo">
<img src="../images/5.jpg" alt="Sample photo">
<img src="../images/6.jpg" alt="Sample photo">
<img src="../images/7.jpg" alt="Sample photo">
<img src="../images/8.jpg" alt="Sample photo">
<img src="../images/9.jpg" alt="Sample photo">
</main>
<style>
.cards {display: flex; flex-wrap: wrap; align-items: flex-start; flex-direction: row;
max-height: 100vh;}
.cards img { margin: 10px; border: 3px solid #000; box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3);
max-width: 20%; }
</style>
flex-direction column
code:
<main class="cards1">
<img src="../images/1.jpg" alt="Sample photo">
<img src="../images/2.jpg" alt="Sample photo">
<img src="../images/3.jpg" alt="Sample photo">
<img src="../images/4.jpg" alt="Sample photo">
<img src="../images/5.jpg" alt="Sample photo">
<img src="../images/6.jpg" alt="Sample photo">
<img src="../images/7.jpg" alt="Sample photo">
<img src="../images/8.jpg" alt="Sample photo">
<img src="../images/9.jpg" alt="Sample photo">
</main>
<style>
.cards1 {display: flex; flex-wrap: wrap; align-items: flex-start; flex-direction: column;
max-height: 100vh;}
.cards1 img { margin: 10px; border: 3px solid #000; box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3);
max-width: 205;}
</style>
align-items stretch
code:
<main class="cards2">
<img src="../images/1.jpg" alt="Sample photo">
<img src="../images/2.jpg" alt="Sample photo">
<img src="../images/3.jpg" alt="Sample photo">
<img src="../images/4.jpg" alt="Sample photo">
<img src="../images/5.jpg" alt="Sample photo">
<img src="../images/6.jpg" alt="Sample photo">
</main>
<style>
.cards2 {display: flex; flex-wrap: wrap; align-items: stretch; }
.cards2 img { margin: 10px; border: 3px solid #000; box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3);
max-width: 20%; }
</style>
align-items flex-start
code:
<main class="cards3">
<img src="../images/1.jpg" alt="Sample photo">
<img src="../images/2.jpg" alt="Sample photo">
<img src="../images/3.jpg" alt="Sample photo">
<img src="../images/4.jpg" alt="Sample photo">
<img src="../images/5.jpg" alt="Sample photo">
<img src="../images/6.jpg" alt="Sample photo">
</main>
<style>
.cards3 {display: flex; flex-wrap: wrap; align-items: flex-start; }
.cards3 img { margin: 10px; border: 3px solid #000; box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3);
max-width: 20%; }
</style>
align-items flex-end
code:
<main class="cards4">
<img src="../images/1.jpg" alt="Sample photo">
<img src="../images/2.jpg" alt="Sample photo">
<img src="../images/3.jpg" alt="Sample photo">
<img src="../images/4.jpg" alt="Sample photo">
<img src="../images/5.jpg" alt="Sample photo">
<img src="../images/6.jpg" alt="Sample photo">
</main>
<style>
.cards4 {display: flex; flex-wrap: wrap; align-items: flex-start; }
.cards4 img { margin: 10px; border: 3px solid #000; box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3);
max-width: 20%; }
</style>
align-items center
code:
<main class="cards5">
<img src="../images/1.jpg" alt="Sample photo">
<img src="../images/2.jpg" alt="Sample photo">
<img src="../images/3.jpg" alt="Sample photo">
<img src="../images/4.jpg" alt="Sample photo">
<img src="../images/5.jpg" alt="Sample photo">
<img src="../images/6.jpg" alt="Sample photo">
</main>
<style>
.cards5 {display: flex; flex-wrap: wrap; align-items: flex-start; }
.cards5 img { margin: 10px; border: 3px solid #000; box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3);
max-width: 20%; }
</style>
flexbox grids
top
random grid
1
2
3
4
5
6
7
8
9
10
11
12
13
14
code:
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
</div>
<style>
.container { display: flex; flex-direction: row; justify-content: space-between; height: 50vh;
flex-wrap: wrap;}
.container > div {font-size: 1vw; padding: .5vw; color: white; margin: 5px; border-radius: 3px;
background: yellowgreen; border: 5px solid black; height: 2vw;}
.container > div:nth-child(odd) {width: 10%;}
.container > div:nth-child(even) {width: 20%;}
.container > div:nth-child(2), .container > div:nth-child(4), .container > div:nth-child(9) {width: 60%;}
</style>
12 column grid 1
1
2
3
4
5
6
7
8
9
10
11
12
code:
<div>
<div class="wrapper">
<div>1</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</div>
<style>
.wrapper {display: flex;}
.wrapper > div { font-size: 3vh; color: white; background: gray; margin: .1em;
padding: .3em; border-radius: 3px; flex: 1;}
</style>
12 column grid 2
code:
<div>
<div class="wrapper1">
<div>1</div>
</div>
<div class="wrapper1">
<div>1</div>
<div>2</div>
</div>
<div class="wrapper1">
<div>1</div>
<div>2</div>
</div>
<div class="wrapper1">
<div>1</div>
<div>2</div>
</div>
<div class="wrapper1">
<div>1</div>
<div>2</div>
</div>
<div class="wrapper1">
<div>1</div>
<div>2</div>
</div>
<div class="wrapper1">
<div>1</div>
<div>2</div>
</div>
<div class="wrapper1">
<div>1</div>
<div>2</div>
</div>
<div class="wrapper1">
<div>1</div>
<div>2</div>
</div>
<div class="wrapper1">
<div>1</div>
<div>2</div>
</div>
<div class="wrapper1">
<div>1</div>
<div>2</div>
</div>
<div class="wrapper1">
<div>1</div>
<div>2</div>
</div>
<div class="wrapper1">
<div>1</div>
</div>
</div>
<style>
.wrapper1 {display: flex;}
.wrapper1 > div {font-size: 3vh; color: white; background: darkslategray; margin: .1em;
padding: .3em; border-radius: 3px; flex: 1;}
.wrapper1:nth-child(2) > div:nth-child(1), .wrapper1:nth-child(12) > div:nth-child(2) { flex: 1; }
.wrapper1:nth-child(2) > div:nth-child(2), .wrapper1:nth-child(12) > div:nth-child(1) { flex: 11; }
.wrapper1:nth-child(3) > div:nth-child(1), .wrapper1:nth-child(11) > div:nth-child(2) { flex: 2;}
.wrapper1:nth-child(3) > div:nth-child(2), .wrapper1:nth-child(11) > div:nth-child(1) { flex: 10;}
.wrapper1:nth-child(4) > div:nth-child(1), .wrapper1:nth-child(10) > div:nth-child(2) { flex: 3; }
.wrapper1:nth-child(4) > div:nth-child(2), .wrapper1:nth-child(10) > div:nth-child(1) { flex: 9; }
.wrapper1:nth-child(5) > div:nth-child(1), .wrapper1:nth-child(9) > div:nth-child(2) { flex: 4; }
.wrapper1:nth-child(5) > div:nth-child(2), .wrapper1:nth-child(9) > div:nth-child(1) { flex: 8; }
.wrapper1:nth-child(6) > div:nth-child(1), .wrapper1:nth-child(8) > div:nth-child(2) { flex: 5; }
.wrapper1:nth-child(6) > div:nth-child(2), .wrapper1:nth-child(8) > div:nth-child(1) { flex: 7; }
.wrapper1:nth-child(7) > div:nth-child(1) { flex: 6; }
.wrapper1:nth-child(7) > div:nth-child(2) { flex: 6; }
</style>
vertical 12 column grid
1
2
3
4
5
6
7
8
9
10
11
12
code:
<div class="wrapper2">
<div class="column">
<div>1</div>
</div>
<div class="column">
<div>1</div>
<div>2</div>
</div>
<div class="column">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="column">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="column">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="column">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="column">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
<div class="column">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<div class="column">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="column">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
<div class="column">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
</div>
<div class="column">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</div>
<style>
.wrapper2 {display: flex;}
column {display: flex; flex-direction: column;}
.column > div {font-size: 3vh; color: white; background: royalblue; margin: .1em; padding: .3em 1em; border-radius: 3px; flex: 1;}
</style>
adaptive photo layout
top
code:
<ul>
<li><img src="../images/1.jpg" alt="photo 1" loading="lazy"></li>
<li><img src="../images/1a.jpg" alt="photo 1" loading="lazy"></li>
<li><img src="../images/2.jpg" alt="photo 1" loading="lazy"></li>
<li><img src="../images/2a.jpg" alt="photo 1" loading="lazy"></li>
<li><img src="../images/3.jpg" alt="photo 1" loading="lazy"></li>
<li><img src="../images/3a.jpg" alt="photo 1" loading="lazy"></li>
<li><img src="../images/4.jpg" alt="photo 1" loading="lazy"></li>
<li><img src="../images/4a.jpg" alt="photo 1" loading="lazy"></li>
<li><img src="../images/5.jpg" alt="photo 1" loading="lazy"></li>
<li><img src="../images/5a.jpg" alt="photo 1" loading="lazy"></li>
<li><img src="../images/6.jpg" alt="photo 1" loading="lazy"></li>
<li><img src="../images/6a.jpg" alt="photo 1" loading="lazy"></li>
<!-- Adding an empty <li> here so the final photo doesn't stretch like crazy. Try removing it and see what happens! -->
<li></li>
</ul>
<style>
ul {display: flex; flex-wrap: wrap;}
li {height: 40vh; flex-grow: 1; list-style: none; }
li:last-child {flex-grow: 10;}
ul li img { max-height: 100%; min-width: 100%; object-fit: cover; vertical-align: bottom;}
@media (max-aspect-ratio: 1/1) {
li { height: 30vh; }
}
@media (max-height: 480px) {
li { height: 80vh; }
}
@media (max-aspect-ratio: 1/1) and (max-width: 480px) {
ul { flex-direction: row; }
li { height: auto; width: 100%; }
img { width: 100%; max-height: 75vh; min-width: 0; }
}
</style>
responsive navigation bar
top
code:
<nav class="navbar">
<div class="logo">Logo</div>
<div class="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
</nav>
<style>
.logo{display: block; position: relative; width: 10vw; height: 5vh;
border: 0.2vw solid blue; padding: 0 auto;}
.navbar { display: flex; justify-content: space-between; align-items: center;
padding: 10px; width: 100%; flex-flow: row nowrap;}
.menu { display: flex; gap: 15px; background-color: skyblue; color: green;}
.menu a {display: inline; position: relative; text-decoration: none;
color: black; width: 8vw; height: 5vh; text-align: center; margin-top: 2vh;}
</style>
flexible grid layout
top
Item 1
Item 2
Item 3
Item 4
code:
<div class="grid1">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
<style>
.grid1 {display: flex;flex-wrap: wrap; gap: 20px; height: 10vh;}
.item {flex: 1 1 calc(25% - 20px); background-color: lightgrey; padding: 20px;
box-sizing: border-box; text-align: center;}
</style>
aligning content with flexbox
top
code:
<div class="centered-container">
<div class="centered-item">Centered Item</div>
</div>
<style>
.centered-container {display: flex; justify-content: center; align-items: center;
height: 20vh; background-color: orange;}
.centered-item {background-color: lightblue; padding: 20px;}
</style>
creating a holy-grail layout
top
<div class="holy-grail">
<header>Header</header>
<div class="content">
<aside class="sidebar left">Left Sidebar</aside>
<main class="central">Main Content</main>
<aside class="side right">Right Sidebar</aside>
</div>
<footer>Footer</footer>
</div>
<style>
.holy-grail {display: flex; flex-direction: column; min-height: 20vh;}
header, footer {background-color: lightcoral; padding: 10px; text-align: center;}
.content {display: flex; flex: 1;}
.side { flex: 1; background-color: lightgreen; padding: 10px; }
.central{flex: 2; background-color: lightyellow; padding: 10px; }
</style>
creating a responsive sidebar layout
top
code:
<div class="sidebar-layout">
<aside class="side2">Sidebar Content</aside>
<div class="main-content">Main Content</div>
</div>
<style>
.sidebar-layout { display: flex; flex-wrap: wrap;}
.side2 {flex: 1 1 200px; background-color: #ccc; padding: 20px;}
.main-content { flex: 3 1 600px; padding: 20px; background-color: aqua;}
</style>
