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-shrink-answer.php below:

Website Navigation

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

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)

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

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