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

Website Navigation

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

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)

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

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