Flexbox helps you design your webpage so that it looks good on any screen size.
We'll use Flexbox to build a responsive photo gallery webpage.
Step 1
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
Step 2
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8">
</head> <body> </body></html>
Step 3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo Gallery</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
</body>
</html>
Step 4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo Gallery</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="header">
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
</body>
</html>
Step 5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo Gallery</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="header">
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
</div>
<div id="gallery">
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
</div>
</body></html>
Step 6
<div id="gallery">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg" />
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg" />
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg" />
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg" />
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg" />
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg" />
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg" />
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg" />
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg" />
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg" />
</div>
Step 7
* {
box-sizing:border-box;
}
Step 8
#gallery img {
width: 25%;
height: 300px;
}
Step 9
body {
margin:0;
background-color:#EBE7E7;
font-family:Arial;
}
Step 10
.header {
text-align:center;
padding:32px;
background-color:#E0DDDD;
}
Step 11
#gallery{
display: flex;
}
Step 12
#gallery {
display: flex;
flex-direction: row;
}
Step 13
#gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
Step 14
#gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content:center;
}
Step 15
#gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items:center;
}
Step 16
#gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 0 4px;
}
Step 17
#gallery img {
width: 25%;
height: 300px;
object-fit:cover;
}
Step 18
#gallery img {
width: 25%;
height: 300px;
object-fit: cover;
margin-top: 8px;
padding: 0 4px;
}
Step 19
#gallery img {
width: 25%;
height: 300px;
object-fit: cover;
margin-top: 8px;
padding: 0 4px;
border-radius:10px;
}
Step 20
@media (max-width: 800px) {
#gallery img {
width: 50%;
}
}
Step 21
@media (max-width: 600px) {
#gallery img{
width: 100%;
}
}