Search⌘ K
Home
Courses
Designing Web Layouts with CSS and Flexbox

Flex-wrap

Explore how the flex-wrap property in Flexbox enables content to break into multiple lines, preventing item shrinking in fixed-width containers. Understand the values of flex-wrap and apply this knowledge to build responsive, multi-line layouts for galleries and blog posts.

We'll cover the following...

Challenges with creating multiline grid structure

When creating a gallery of images or a landing page displaying thumbnails of blog posts, it is a natural phenomenon that we prefer styling each image or post in a container, regardless of whether they are displayed in one line or multiple lines.

The following markup is not intuitive:

<div class="container">
  <div class="row">
    <div class="blogpost">Post 1</div>
    <div class="blogpost">Post 2</div>    
    <div class="blogpost">Post 3</div>
  </div>
  <div class="row">
    <div class="blogpost">Post 4</div>
    <div class="blogpost">Post 5</div>    
    <div class="blogpost">Post 6</div>
  </div>
</div>

The problem with the above markup is that we hardcode the presentation. Using this layout, we have to display all three blogposts in one row. This is not too good when creating responsive layouts.

Therefore, the need arises to create layouts like this:

<div class="container">
  <div class="blogpost">Post 1</div>
  <div class="blogpost">Post 2</div>    
  <div class="blogpost">Post 3</div>
  <div class="blogpost">Post 4</div>
  <div class="blogpost">Post 5</div>    
  <div class="blogpost">Post 6</div>
</div>

Whether these posts are ...