Learn CSS Flexbox by Building a Photo Gallery - Step 15

HTML-CSS
1

the containers are already on a vertical axis? when i entered “align-items” nothing happened? the code passes yes but im missing the point here?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <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>
    <header class="header">
      <h1>css flexbox photo gallery</h1>
    </header>
    <div class="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">
    </div>
  </body>
</html>

/* file: styles.css */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  background: #f5f6f7;
}

.header {
  text-align: center;
  text-transform: uppercase;
  padding: 32px;
  background-color: #0a0a23;
  color: #fff;
  border-bottom: 4px solid #fdb347;
}


/* User Editable Region */

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

/* User Editable Region */


.gallery img {
  width: 100%;
  max-width: 350px;
  height: 300px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge: Learn CSS Flexbox by Building a Photo Gallery - Step 15

Link to the challenge:

2

The following is the page without ‘align-items’ property:

image
image652×679 40.3 KB

Now, with that property added to the same CSS rule:

image
image656×688 42.9 KB

As you can see, the images are not positioned the same way. On the second screenshot, you have the property in question, put in action. The images are vertically center aligned.

3 Likes
3 
.gallery img {
  width: 100%;
  max-width: 350px;
  height: 300px;
}

if you remove the height property (for testing purposes) you will see it :-).

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.