Follow us on X (Twitter)  Like us on Facebook  Connect with us on LinkedIn  Subscribe to our YouTube Channel  Subscribe to our WhatsApp Group

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.

 

How to create HTML WrapPanel using the CSS Flexbox Layout?

 

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.

 

Have a question? Or, a comment? Let's Discuss it below...

dhgate

Thank you for visiting our website!

We value your engagement and would love to hear your thoughts. Don't forget to leave a comment below to share your feedback, opinions, or questions.

We believe in fostering an interactive and inclusive community, and your comments play a crucial role in creating that environment.