CSS Properties: How to the second flex-item grow three times wider than the rest?

Last update on February 22 2024 12:45:33 (UTC/GMT +8 hours)

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 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:

This HTML document demonstrates how to make the second flex item grow three times wider than the rest 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.
Each div element inside the container is assigned a specific flex-grow value to control its ability to grow relative to the other flex items.
The second div element is targeted specifically and given a flex-grow value of 3, making it grow three times wider than the other div elements.
This setup demonstrates how the flex-grow property can be used to control the growth behavior of flexible items within a flex container.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page