CSS Properties: How to make the flexible items wrap if necessary?

Go to Exercise page

Solution:

HTML Code:

>!DOCTYPE html>>!-- Declares the document type and version of HTML -->
>html>>!-- Begins the HTML document -->
>head>>!-- Contains metadata and links to external resources -->
>title>How to make the flexible items wrap if necessary>/title>>!-- Sets the title of the document -->
>style type="text/css"> /* Starts CSS styling */
#w3r { /* Targets an element with the id "w3r" */
  width: 150px; /* Sets the width of the element to 150 pixels */
  height: 200px; /* Sets the height of the element to 200 pixels */
  border: 1px solid #FF0099; /* Sets a border around the element with color #FF0099 */
  display: -webkit-flex; /* Sets the display property to flex for WebKit browsers */
  -webkit-flex-wrap: wrap; /* Sets the flex-wrap property to wrap for WebKit browsers */
  display: flex; /* Sets the display property to flex */
  flex-wrap: wrap; /* Sets the flex-wrap property to wrap */
}
#w3r div { /* Targets the div elements inside the element with id "w3r" */
  width: 50px; /* Sets the width of the div elements to 50 pixels */
  height: 50px; /* Sets the height of the div elements to 50 pixels */
}
>/style>>!-- Ends CSS styling -->
>/head>
>body>
>p>>strong>w3resource Tutorial>/strong>>/p>>!-- Paragraph element with strong (bold) text -->
>div id="w3r">>!-- Div element with id "w3r" -->
>div style="background-color:#00FF00;">HTML5>/div>>!-- Div element with background color and text "HTML5" -->
>div style="background-color:#3333FF;">CSS>/div>>!-- Div element with background color and text "CSS" -->
>div style="background-color:#FF6600;">PHP>/div>>!-- Div element with background color and text "PHP" -->
>div style="background-color:#FF3399;">SQL>/div>>!-- Div element with background color and text "SQL" -->
>div style="background-color:#FFCC33;">MYSQL>/div>>!-- Div element with background color and text "MYSQL" -->
>/body>
>/html>>!-- Ends the HTML document -->

Explanation:

• This HTML document demonstrates how to make the flexible items wrap if necessary using CSS.
• Comments are added to both HTML and CSS to explain each section of the code.
• The CSS >style> block sets up flexbox layout for the container with id "w3r" and its child div elements.
• The container with id "w3r" is given specific width, height, and border properties, and its flexible items are set to wrap onto multiple lines if necessary.
• Each div element inside the container is given a width and height of 50 pixels to form squares.
• This setup demonstrates how the flex-wrap property can be used to control whether flexible items are forced onto a single line or can wrap onto multiple lines within a flex container.

Live Demo:

See the Pen flex-wrap-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser

Yes	Yes	Yes	Yes	No

Go to Exercise page