Using flex-basis to Set Initial Size of Flexbox Items in CSS

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-basis.css">
</head>
<body>
  <div class="container">
    <div class="flex-item box-1">Box-1 - Tutor Joes</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;}

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

.container{
  display: flex;
 
}


.flex-item{
  /* flex-shrink: 1;  */
  flex-basis: auto;
}

.box-1{
  flex-basis:400px;
  flex-grow: 1;
}

Live Preview

This code defines a CSS stylesheet with styles for a container element and its child elements.The child elements are further defined by the classes "box-1" through "box-5", each with a unique background color.

The main part of the code uses flexbox properties to make the container a flex container, and each child element a flex item. The flex-basis property sets the initial size of each child element, and the flex-grow property sets how much the child element should grow if there is extra space available.

In this specific code, box-1 has a flex-basis of 400px and a flex-grow of 1, which means it will take up at least 400px of space, and will grow to take up any additional space available. The other child elements do not have a set flex-basis or flex-grow value, so they will adjust to fill the remaining space in the container.