Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
About CSS
3.
What is CSS flex property?
3.1.
Syntax
4.
Properties and Functions of CSS flex Property
5.
Features and Applications of CSS flex property
6.
Implementing flex Property in CSS with Examples
7.
Frequently Asked Questions
7.1.
What is Flex 50% in CSS?
7.2.
Why is flex used in CSS?
7.3.
What is the flex 1 property?
7.4.
What is flexbox vs Flex in CSS?
7.5.
Why is order important in Flexbox?
7.6.
What happens if you set display: flex; on every element in your website?
8.
Conclusion
Last Updated: Mar 27, 2024
Easy

What is CSS flex property?

Author Ayush Mishra
1 upvote
gp-icon
Basics of Javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction

"If you want to create beautiful and responsive websites, mastering CSS is necessary. In this blog, we'll discuss CSS flex property in web development and some examples of how it can enhance the look and functionality of a website and make it responsive and flexible."

What is CSS flex property?

Recommended Topic, Difference Between CSS and SCSS

About CSS

CSS stands for Cascading Style Sheets. It is a stylesheet language used to describe a document's presentation in a markup language. It controls the layout and appearance of web pages and other documents, such as PDFs and Electronic Publications. 

It is simpler to maintain and update a website's design when developers can separate the presentation of a document from its structure and content using CSS.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

What is CSS flex property?

The CSS flex property expresses the 

  • Flex-grow properties.
     
  • Flex-shrink properties.
     
  • Flex-basis properties.
     

It specifies the ability of an element to adjust its size and position within a container in response to the available space. The flex property can create flexible and responsive layouts, allowing elements to be automatically resized and repositioned based on the container size and available space.

Syntax

The syntax of the CSS flex property is as follows:

flex: flex-grow flex-shrink flex-basis;

 

  • flex-grow: Specifies how much an item can grow relative to other flex items. It's a non-negative number (default is 0).
     
  • flex-shrink: Defines how much an item can shrink relative to others. It's a non-negative number (default is 1).
     
  • flex-basis: Sets the initial size of the item before free space is distributed. It can be a length value (e.g., px, %) or auto (default).

Properties and Functions of CSS flex Property

The CSS flex layout module allows you to create flexible and responsive layouts by specifying the size and position of elements within a container. 

Functions of flex

The main properties and functions of flex layout are:

1. flex-direction: It specifies the direction in which elements are laid out within a container (row, column, row-reverse, column-reverse).

2. flex-wrap: It specifies whether elements should wrap or not if there is not enough space within a container.

3. flex-flow: It is shorthand for flex-direction and flex-wrap.

4. justify-content: It aligns elements along the main axis of a container (flex-start, flex-end, center, space-between, space-around).

5. align-items: It aligns elements along the cross-axis of a container (flex-start, flex-end, center, baseline, stretch).

6. align-content: It aligns the lines of a multi-line container along the cross axis (flex-start, flex-end, center, space-between, space-around, stretch).

7. flex-grow: It specifies how much an element should grow relative to the remaining free space in a container.

8. flex-shrink: It specifies how much an element should shrink relative to the remaining free space in a container.

9. flex-basis: It specifies the initial size of an element before any growing or shrinking occurs.

10. flex: It is shorthand for flex-grow, flex-shrink, and flex-basis.

11. order: It specifies the order of elements within a container.

These properties and functions can create flexible and responsive layouts, allowing elements to be automatically resized and repositioned based on the container size and available space.

Features and Applications of CSS flex property

CSS flex property allows for a flexible box layout, meaning elements within a container can be laid out in any direction and adapt to different screen sizes and devices. 

Features and applications of flex property

Some common features and applications of CSS flex property are:-

1. Creating flexible and responsive grid layouts for web pages.

2. Align elements horizontally or vertically within a container.

3. Setting the order of elements within a container.

4. Setting the proportion of space each element takes up within a container.

5. Creating flexible and responsive navigation menus.

6. Creating flexible and responsive forms.

7. Creating flexible and responsive image galleries.

Implementing flex Property in CSS with Examples

In this part, we will discuss various examples to understand flex property in CSS.

Example 1: Here is an example of how to use the flex property with HTML implementation.

<!DOCTYPE html>
<html>
   <head>
         
      <meta charset="utf-8">
         
      <meta name="viewport" content="width=device-width, initial-scale=1">
         
      <title>Coding Ninjas</title>
         
      <style type="text/css">
         .container {
          display: flex; /* enables flexbox layout */
          flex-wrap: wrap; /* sets the flex-wrap property to wrap */
          justify-content: center; /* centers the items horizontally within the container */
          align-items: center; /* centers the items vertically within the container */
         }
         .item-1, .item-2, .item-3 {
          flex: 1; /* sets the flex-grow, flex-shrink, and flex-basis properties to 1 */
          padding: 10px; /* adds padding to the items */
          text-align: center; /* centers the text within the items */
         }
         .item-1{
            background-color: yellow;
         }
         .item-2{
            background-color: blue;
         }
         .item-3{
            background-color: red;
         }
            
      </style>
   </head>
   <body>
      <div class="container">
            
         <div class="item-1">Item 1</div>
            
         <div class="item-2">Item 2</div>
            
         <div class="item-3">Item 3</div>
      </div>
   </body>
</html>

 

Output:

Output of flex property

Explanation: This will create a container with three items inside, and the container will be center aligned, and the items will wrap to the following line if the space is not enough.

You can also use the flex property on individual items to control their size and position within the container. For example, you can use the align-self property on an item to override the align-items property set on the container and align the item differently from the other items.

Example 2: Here is an example of using the flex-grow, flex-shrink, and flex-basis properties with HTML implementation.

<!DOCTYPE html>
<html>
   <head>
         
      <meta charset="utf-8">
         
      <meta name="viewport" content="width=device-width, initial-scale=1">
         
      <title>Coding Ninjas</title>
         
      <style type="text/css">
         .container {
          display: flex; /* enables flexbox layout */
          flex-wrap: wrap; /* sets the flex-wrap property to wrap */
          justify-content: space-between; /* distribute the items evenly within the container */
         }
         #item1 {
          flex: 2 1 150px; /* flex-grow: 2, flex-shrink: 1, flex-basis: 150px */
          background-color: red;
           
          } 
         #item2 {
          flex: 1 2 200px; /* flex-grow: 1, flex-shrink: 2, flex-basis: 200px */
          background-color: yellow;
         }
         #item3 {
          flex: 3 0 100px; /* flex-grow: 3, flex-shrink: 0, flex-basis: 100px */
          background-color: blue;
         }
            
      </style>
   </head>
   <body>
      <div class="container">
          
         <div class="item" id="item1">Item 1</div>
          
         <div class="item" id="item2">Item 2</div>
          
         <div class="item" id="item3">Item 3</div>
      </div>
   </body>
</html>

 

Output:

flex property output

Explanation: In this example, the container is set to have the flex-wrap property set to wrap, so if the items don't fit in a single row, they will wrap to the next row.

The justify-content property is set to space-between so that the items will be evenly distributed within the container.

For example, on the first item (item1), the flex property is set to 2 1 150px, which means that the item will grow two times more than the other items, shrink one time less than the other items, and with a base size of 150px.

Frequently Asked Questions

What is Flex 50% in CSS?

flex: 50% in CSS is a shorthand property that assigns a flexible width of 50% to a flex item within a flex container, allowing it to take up half of the available space.

Why is flex used in CSS?

Flex in CSS (Flexible Box Layout) is used to create flexible and responsive page layouts. It simplifies the design process, allowing elements to adapt to various screen sizes and orientations, enhancing web page responsiveness.

What is the flex 1 property?

The flex: 1 property in CSS is used within a flex container to distribute available space equally among its child elements. It makes the items expand and occupy the available space evenly.

What is flexbox vs Flex in CSS?

"Flexbox" and "flex" in CSS both relate to flexible layout design. Flexbox (short for Flexible Box Layout) is a layout model, while "flex" is a CSS property used within flexbox to control how items expand and shrink within a flex container. Flexbox is the overarching layout system, and "flex" is a property within that system.

Why is order important in Flexbox?

The order property in Flexbox is essential because it allows you to specify the order of flex items within the container. By default, flex items are shown in the HTML's original order. However, using the order property, you can change the order of the items, moving them forward or backward within the container.

What happens if you set display: flex; on every element in your website?

If you set the display property to flex on every element in your website, it will cause every element to become a flex container. This means that all the child elements within each component will become flex items and be subject to the Flexbox layout rules.

Conclusion

In this blog, we have discussed the CSS flex property. The CSS flex property in web development is used to make the design of the layout flexible and responsive.

To see and learn more about CSS, please read the following articles:

1. Introduction to CSS

2. CSS Layout

3. CSS Color

4. CSS Interview Questions

Versions of CSS

Refer to our Guided path to upskill yourself in DSACompetitive ProgrammingJavaScriptSystem Design, and many more! If you want to test your competency in coding, check out the mock test series and participate in the contests hosted on Coding Ninjas Studio!

But you have just started your learning process and are looking for questions from tech giants like Amazon, Microsoft, Uber, etc. For placement preparations, you must look at the problemsinterview experiences, and interview bundles.

We wish you Good Luck! 

Happy Learning!

Previous article
How to use Bulma & Vue together?
Next article
10 Best CSS Frameworks for Front-End Developers
Guided path
Free
gridgp-icon
Basics of Javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass