RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.w3resource.com/html-css-exercise/css-properties/flex-wrap-answer.php below:

Website Navigation

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

CSS Properties: How to make the flexible items wrap if necessary?Last update on February 22 2024 12:44:42 (UTC/GMT +8 hours)

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

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4