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%;

  }

 }