CSS Properties: How the flexible items be the same length, regardless of its content?

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 the flexible items be the same length, regardless of its content</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
#w3r { /* Targets an element with the id "w3r" */
width: 220px; /* Sets the width of the element to 220 pixels */
height: 300px; /* Sets the height of the element to 300 pixels */
border: 1px solid black; /* Sets a black solid border with a width of 1 pixel around the element */
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: 1; /* Sets the flex property to 1 for WebKit browsers */
  flex: 1; /* Sets the flex property to 1 */
  }
</style><!-- Ends CSS styling -->
</head><!-- Ends the head section of the document -->
<body><!-- Begins the body section of the document -->
<p><strong>w3resource Tutorial</strong></p><!-- Paragraph element with strong (bold) text -->
<div id="w3r"><!-- Div element with id "w3r" -->
<div style="background-color:#FF9933;">HTML5</div><!-- Div element with background color and text "HTML5" -->
<div style="background-color:#CCFFFF;">w3resource Exercises, Practice with solution.</div><!-- Div element with background color and text "w3resource Exercises, Practice with solution." -->
<div style="background-color:#0000FF;">CSS</div><!-- Div element with background color and text "CSS" -->
</div><!-- Ends the div with id "w3r" -->
</body><!-- Ends the body section of the document -->
</html><!-- Ends the HTML document -->

Explanation:

This HTML document demonstrates how to make flexible items be the same length regardless of their content 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.
The container with id "w3r" is given specific width, height, and border properties.
Each div element inside the container is set to flex-grow equally, ensuring they have the same length regardless of their content.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page