CSS Properties: How to flex-basis property specifies the initial length of a flexible item?

Last update on February 22 2024 12:44:43 (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 flex-basis property specifies the initial length of a flexible item</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 #3300FF; /* Sets a border around the element with color #3300FF */
 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: 0; /* Sets the flex-grow property to 0 for WebKit browsers */
 -webkit-flex-shrink: 0; /* Sets the flex-shrink property to 0 for WebKit browsers */
 -webkit-flex-basis: 40px; /* Sets the initial length of a flexible item to 40px for WebKit browsers */
  flex-grow: 0; /* Sets the flex-grow property to 0 */
  flex-shrink: 0; /* Sets the flex-shrink property to 0 */
  flex-basis: 40px; /* Sets the initial length of a flexible item to 40px */
}
#w3r div:nth-of-type(2) { /* Targets the second div element inside the element with id "w3r" */
    -webkit-flex-basis: 80px; /* Sets the initial length of the second flexible item to 80px for WebKit browsers */
    flex-basis: 80px; /* Sets the initial length of the second flexible item to 80px */
}
</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" -->
<div style="background-color:#CCFFFF;">w3resource Exercises, Practice with solution.</div><!-- Div element with background color and text "w3resource Exercises, Practice with solution." -->
</body>
</html><!-- Ends the HTML document -->

Explanation:

This HTML document showcases the use of flexbox properties to specify the initial length of flexible items.
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.
Each div element inside the container is set to have a flex basis of 40px by default, ensuring they have an initial length of 40px.
However, the second div element is specifically targeted and given a flex basis of 80px, making it twice as wide as the other div elements.
This setup demonstrates how the flex-basis property can be used to specify the initial length of flexible items within a flex container.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page