curriculum/challenges/english/blocks/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md
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.
Your .gallery selector should have a flex-wrap property set to wrap as the value.
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexWrap, 'wrap');
<!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">
</div>
</body>
</html>
* {
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;
}
.gallery {
display: flex;
flex-direction: row;
--fcc-editable-region--
--fcc-editable-region--
}
.gallery img {
width: 100%;
max-width: 350px;
height: 300px;
}