Learn CSS Flexbox by Building a Photo Gallery - Step 13 explanation of lesson

HTML-CSS
1

“The flex-wrap property determines how your flex items behave when the flex container is too small. Setting it to wrap will allow the items to wrap to the next row or column. nowrap (default) will prevent your items from wrapping and shrink them if needed .Make it so your flex items wrap to the next row when they run out of space.”

As per usual, I have no visual or conceptual understanding of what is being spoken of here, could someone teach me…how would a container not have enough space? wasn’t this the point of this was no matter the viewport the size is universal, always appearing the same , isnt this what the meta=viewport stuff is about? and if things start wrapping/spilling how can you have any control at all of its size and appearance? For me , some things in the lessons dont go far enough with explanations or examples. thanks!

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

/* 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 13

Link to the challenge:

2

Maybe the best way to understand Flexbox is to get an visual idea of what is going on with each Flexbox property put in action:

2 Likes
3

The width of the container is determined by the width of the viewport. For example, a mobile device viewport is narrower than a desktop.

wrap works on flex items pretty much as objects behave in the real world. Depending on the amount of horizontal space the objects will either be side by side or stacked vertically.

An analogy might be a ball pit.

Enough horizontal space, one layer deep (no wrapping).

|BBBBBBBBB|

Not enough horizontal space, three layers deep (wrapping).

|BBB|
|BBB|
|BBB|
1 Like
4

You should have noticed that the alignment of the images changed when you added the flex-wrap property. You can play with it to see how flex wrap works by adjusting the width of the preview frame. As you make the frame wider you will see that more images are placed on each row.

5

thank you so very much, cant tell you how helpful this is.im going to have to read it 5 times but its a different dimension of learning that i need. Now i just need to find a visual representation for everything else. are you aware of one for the “box model” ?

1 Like