CSS Properties: How to the second flex-item shrink three times more than the rest?

Last update on February 22 2024 12:45:34 (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 shrink three times more 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: 350px; /* Sets the width of the element to 350 pixels */
  height: 100px; /* Sets the height of the element to 100 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 */
  display: flex; /* Sets the display property to flex */
}
#w3r div { /* Targets the div elements inside the element with id "w3r" */
  -webkit-flex-grow: 1; /* Sets the flex-grow property to 1 for WebKit browsers */
  -webkit-flex-shrink: 1; /* Sets the flex-shrink property to 1 for WebKit browsers */
  -webkit-flex-basis: 100px; /* Sets the flex-basis property to 100px for WebKit browsers */
  flex-grow: 1; /* Sets the flex-grow property to 1 */
  flex-shrink: 1; /* Sets the flex-shrink property to 1 */
  flex-basis: 100px; /* Sets the flex-basis property to 100px */
#w3r div:nth-of-type(2) { /* Targets the second div element inside the element with id "w3r" */
  -webkit-flex-shrink: 3; /* Sets the flex-shrink property to 3 for WebKit browsers */
  flex-shrink: 3; /* Sets the flex-shrink property to 3 */
}
</style>
</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 shrink three times more 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 flex properties (flex-grow, flex-shrink, flex-basis) to control its flexibility within the flex container.
The second div element is specifically targeted and given a higher flex-shrink value of 3, making it shrink three times more than the other div elements when necessary.
This setup demonstrates how the flex-shrink property can be used to control the shrinkage behavior of flexible items within a flex container.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page