Open In App

CSS flex Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The flex CSS allows to set the length of flexible items. This shorthand property is the combination of flex-grow, flex-shrink, and flex-basis properties.

The flex property is much more responsive and mobile-friendly. It is easy to position child elements and the main container. The margin doesn’t collapse with the content margins. The order of any element can be easily changed without editing the HTML section.

Syntax:

/* flex: grow shrink basis|auto|initial|inherit; */
flex: 1 0 auto;

Property Values:

  • flex-grow Property: A number that specifies, how much items will grow relative to the rest of the flexible items.
  • flex-shrink Property: A number that specifies, how much items will shrink relative to the rest of the flexible items.
  • flex-basis Property: It sets the length of items. Legal values of flex-basis are: auto, inherit, or a number followed by %, em, px, or any other length unit.
    • flex-wrap Property: The CSS flex-wrap property is used to specify whether flex items are forced into a single line or wrapped onto multiple lines.

CSS flex Property Examples

Example 1: This example demonstrates single value representation of flex property.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title> CSS flex Property </title>
    <style>
        #Geeks {
            width: 300px;
            height: 200px;
            border: 1px solid black;
            display: flex;
        }
 
        #Geeks div {
            flex: 1;
        }
 
        .GFG1 {
            background-color: green;
        }
 
        .GFG2 {
            background-color: lightgreen;
        }
 
        .GFG3 {
            background-color: darkgreen;
        }
    </style>
</head>
 
<body>
    <h2>CSS flex Property</h2>
    <div id="Geeks">
        <div class="GFG1"> GeeksforGeeks </div>
        <div class="GFG2"> Lite Content </div>
        <div class="GFG3"> Special Content </div>
    </div>
</body>
 
</html>


Output:

CSS Flex property example output

Explanation:

  • In this example the display: flex; property is applied to the container element #Geeks to enable flexbox layout.
  • Each child div within #Geeks is assigned the flex: 1; property, distributing available space equally among them.
  • This ensures that all child elements expand to fill the container horizontally.

Example 2: This example describes the flex property with the help of the 3 values that represents the flex-grow, flex-shrink & flex-basis properties.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title> CSS flex Property </title>
    <style>
        #Geeks {
            width: 300px;
            height: 200px;
            border: 1px solid black;
            display: flex;
        }
 
        #Geeks div {
            flex: 1 0 auto;
        }
 
        .GFG1 {
            background-color: green;
        }
 
        .GFG2 {
            background-color: lightgreen;
        }
 
        .GFG3 {
            background-color: darkgreen;
        }
    </style>
</head>
 
<body>
    <h2>CSS flex Property</h2>
    <div id="Geeks">
        <div class="GFG1"> GeeksforGeeks </div>
        <div class="GFG2"> Lite Content </div>
        <div class="GFG3"> Special Content </div>
    </div>
</body>
 
</html>


Output:

Explanation:

  • In the above example the display: flex; property enables flexbox layout for the container element #Geeks.
  • Each child div within #Geeks has the flex: 1 0 auto; property, allowing them to grow and shrink as needed.
  • The flex-grow: 1; property distributes available space equally among the child elements.
  • Background colors demonstrate the flexible widths of the child elements.

CSS flex Property Use Cases

1.What is CSS flexbox ?

CSS flexbox is a layout model that allows flexible alignment and distribution of elements within a container, simplifying complex layouts and improving responsiveness.

2.Why would you use flexbox instead of floats?

Flexbox offers more control over layout, easier alignment, and handling of dynamic content, whereas floats are less flexible and prone to issues with alignment and responsiveness.

3.What is CSS Flexbox Layout ?

CSS Flexbox Layout is a one-dimensional layout method for arranging items within a container along a single direction (row or column).

4.How to flex-start items at the beginning of the container using CSS ?

To flex-start items at the beginning of the container in CSS, use the property “align-items: flex-start;” for vertical alignment.

5.How to set flexbox having unequal width of elements using CSS ?

To set flexbox items with unequal widths in CSS, assign different flex values to each item using the “flex” property.

Supported Browsers

The browser supported by value attribute in option tag are listed below



Last Updated : 07 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads