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 the second flex-item grow three times wider than the rest</title><!-- Sets the title of the document -->
<style type="text/css"><!-- Starts CSS styling -->
#w3r { /* Targets an element with the id "w3r" */
width: 400px; /* Sets the width of the element to 400 pixels */
height: 100px; /* Sets the height of the element to 100 pixels */
border: 1px solid #FF00FF; /* Sets a border around the element with color #FF00FF */
display: -webkit-flex; /* Sets the display property to flex for WebKit browsers */
display: flex; /* Sets the display property to flex */
}
#w3r div:nth-of-type(1) {-webkit-flex-grow: 1;} /* Targets the first div element inside the element with id "w3r" and sets its flex-grow property to 1 for WebKit browsers */
#w3r div:nth-of-type(2) {-webkit-flex-grow: 3;} /* Targets the second div element inside the element with id "w3r" and sets its flex-grow property to 3 for WebKit browsers */
#w3r div:nth-of-type(3) {-webkit-flex-grow: 1;} /* Targets the third div element inside the element with id "w3r" and sets its flex-grow property to 1 for WebKit browsers */
#w3r div:nth-of-type(4) {-webkit-flex-grow: 1;} /* Targets the fourth div element inside the element with id "w3r" and sets its flex-grow property to 1 for WebKit browsers */
#w3r div:nth-of-type(5) {-webkit-flex-grow: 1;} /* Targets the fifth div element inside the element with id "w3r" and sets its flex-grow property to 1 for WebKit browsers */
#w3r div:nth-of-type(1) {flex-grow: 1;} /* Targets the first div element inside the element with id "w3r" and sets its flex-grow property to 1 */
#w3r div:nth-of-type(2) {flex-grow: 3;} /* Targets the second div element inside the element with id "w3r" and sets its flex-grow property to 3 */
#w3r div:nth-of-type(3) {flex-grow: 1;} /* Targets the third div element inside the element with id "w3r" and sets its flex-grow property to 1 */
#w3r div:nth-of-type(4) {flex-grow: 1;} /* Targets the fourth div element inside the element with id "w3r" and sets its flex-grow property to 1 */
#w3r div:nth-of-type(5) {flex-grow: 1;} /* Targets the fifth div element inside the element with id "w3r" and sets its flex-grow property to 1 */
</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:
Live Demo:
See the Pen flex-grow-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
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