How to create a responsive Wrap Panel in HTML using the CSS Flexbox Layout?

In HTML, generally we use the following layout display modes: none, block, inline, table and positioned. There exists one layout module, named Flexible Box Layout, which allows you to create a flexible layout and make it as a Wrap Panel.

In this blog post, we will learn about Flex Box Layout and how to use it to create a wrap panel by just using HTML and CSS.

The Flexible Box Layout Module, makes it easier to design a flexible responsive layout without using the float property of CSS. To begin with this, you will need a container. You can define your parent <div/> container with a CSS property display:flex; to create the flex layout.

You can then use the flex-wrap property on the parent container to define whether the flex items should wrap or not. Here's a list of important flex-wrap property values, that you must need to know:

• The default value nowrap specifies that the flex items will not wrap.
• The value wrap specifies that the flex items will wrap, if necessary.
• The value wrap-reverse specifies that the flex items will wrap in reverse order.

Let's go by an example. Consider the following CSS Style, which contains a style for the parent container. The display:flex; makes it responsive and the flex-wrap:wrap; makes it wrapable container.

<style>
  #wrappanel {
    width:100%;
    height:320px;
    display:flex;
    flex-wrap:wrap;
  }
  
  #wrappanel .thumbnail {
    margin:8px;
    width:300px;
    height:150px;
    background-color:orange;
  }
</style>

As the CSS is ready, let's go to the HTML to create the layout. First add a <div> with an ID as wrappanel and then add some <div/> tags as children to the parent <div>. Set the class of the child divs to thumbnail. As per our CSS, the thumbnail div's will have 300x150 px dimension and an orange background. Here's the HTML code for your reference:

<div id="wrappanel">
  <div class="thumbnail">&#160;</div>
  <div class="thumbnail">&#160;</div>
  <div class="thumbnail">&#160;</div>
  <div class="thumbnail">&#160;</div>
  <div class="thumbnail">&#160;</div>
</div>

Now, if you open render the created HTML page, you will see five rectangles inside the page. Resize the page to see how this arrange themselves and wraps automatically based on the page size.

Was the post helpful? Do let me know your comments. To know more about this flex-layout, check the flex property page available on w3schools.com.