CSS flex Property
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> #Beginner { width: 300px; height: 200px; border: 1px solid black; display: flex; } #Beginner 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="Beginner"> <div class="GFG1"> w3wiki </div> <div class="GFG2"> Lite Content </div> <div class="GFG3"> Special Content </div> </div></body></html> |
Output:
Explanation:
- In this example the display: flex; property is applied to the container element #Beginner to enable flexbox layout.
- Each child div within #Beginner 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> #Beginner { width: 300px; height: 200px; border: 1px solid black; display: flex; } #Beginner 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="Beginner"> <div class="GFG1"> w3wiki </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 #Beginner.
- Each child div within #Beginner 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
CSS flexbox is a layout model that allows flexible alignment and distribution of elements within a container, simplifying complex layouts and improving responsiveness.
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.
CSS Flexbox Layout is a one-dimensional layout method for arranging items within a container along a single direction (row or column).
To flex-start items at the beginning of the container in CSS, use the property “align-items: flex-start;” for vertical alignment.
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
Contact Us