Mastering the Flex Property in CSS: A Comprehensive Guide to Creating Flexible Layouts

The flex-basis property in CSS is used to set the initial size of a flexbox item before any available space is distributed among the flex items. It specifies the default size of the element along the main axis.

The flex-basis property accepts values in different units such as pixels, percentages, em, and so on. It can also accept the auto value, which sets the initial size based on the size of the content or the default size of the element.

When using the flex-basis property, it's important to note that it only applies when the flex item is not being flexed. In other words, if there is not enough space in the flex container to accommodate all the flex items, the flex-basis property is overridden and the available space is distributed among the flex items according to their flex-grow and flex-shrink properties.

Here's an example of how to use the flex-basis property in CSS:

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="Flex.css">
</head>
<body>
  <div class="container">
    <div class="flex-item box-1">Box-1</div>
    <div class="flex-item box-2">Box-2</div>
    <div class="flex-item box-3">Box-3</div>
    <div class="flex-item box-4">Box-4</div>
    <div class="flex-item box-5">Box-5</div>
  </div>
</body>
</html>

style.css :

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;900&display=swap');

*{
  margin: 0;
  padding: 0;
  font-family: 'Rubik', sans-serif;

}

.container{
  border:5px solid black;
}

.flex-item{
  color:white;
  font-size: 18px;
  padding: 16px;
  text-align: center;
}

.box-1{background-color: #1abc9c;}
.box-2{background-color:#3498db;}
.box-3{background-color: #2ecc71;}
.box-4{background-color: #9b59b6;}
.box-5{background-color:#34495e;}
.box-6{background-color:#2980b9;}
.box-7{background-color:#e74c3c;}
.box-8{background-color: #d35400;}
.box-9{background-color:#2c3e50;}

/*-----------------------------------*/

.container{
  display: flex;
 
}

/* Flex-grow */
/* Flex-grow ,flex-basis (% px) */
/* Flex-grow , flex-shrink */
/* Flex-grow , flex-shrink , flex-basis */
.box-1{
flex:0 1 auto;
flex:0 1 200px;
flex:0 0 200px;
}

Live Preview

This code defines the CSS styling for a flexbox container with a class of "container" and flex items with a class of "flex-item".

The flex properties for the "box-1" class. It specifies the flex-grow value as 0, flex-shrink as 1, and flex-basis as auto. This means the item will not grow or shrink, and will take the default size based on its content. The second line sets the flex-basis to 200px, so the item will always be 200px wide regardless of its content. The third line sets the flex-grow and flex-shrink to 0, meaning the item will not grow or shrink, but will always be 200px wide.