CSS flex-basis property
The flex-basis property in CSS defines the initial main size of a flex item before any space distribution occurs in a flex container. It sets the base size of the flex item, which is used by the Flexbox layout model to calculate how much space the item should take up relative to other flex items.
Basic Syntax
selector {
flex-basis: value;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
width: 500px; /* Fixed width for demonstration */
height: 100px;
background-color: lightgray;
}
.item {
height: 100%;
margin: 5px;
background-color: lightcoral;
border: 1px solid red;
}
.item-1 {
flex-basis: 150px; /* Set the initial size of this item */
}
.item-2 {
flex-basis: 200px; /* Set the initial size of this item */
}
.item-3 {
flex-basis: 100px; /* Set the initial size of this item */
}
</style>
</head>
<body>
<div class="container">
<div class="item item-1">Item 1</div>
<div class="item item-2">Item 2</div>
<div class="item item-3">Item 3</div>
</div>
</body>
</html>
In this example, flex-basis determines the initial size of each flex item. The actual size of the items may be adjusted based on the remaining space in the container and the flex-grow and flex-shrink properties.
Values for flex-basis
1. auto (default)
- Description: The default value. The flex item’s size is based on its content and any width or height properties set on it. If no width or height is set, it will be as wide as its content.
- Use Case: Use this value when you want the item's size to be determined by its content and any specified width or height.
.item {
flex-basis: auto; /* Size based on content and width/height properties */
}
2. length (e.g., px, em, rem)
- Description: Specifies a fixed size for the flex item. This value sets the size of the item directly and does not adjust based on content or container size.
- Use Case: Use this value when you want the item to have a specific, fixed size regardless of the container or other items.
.item {
flex-basis: 150px; /* Fixed size for the item */
}
3. % (percentage)
- Description: Specifies the size of the flex item as a percentage of the flex container's size. This value adjusts based on the size of the container.
- Use Case: Use this value when you want the item to occupy a certain percentage of the container’s size.
.item {
flex-basis: 30%; /* 30% of the container's size */
}
Practical Examples
Example 1: Fixed Size
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
width: 500px; /* Fixed width for demonstration */
height: 100px;
background-color: lightgray;
}
.item {
height: 100%;
margin: 5px;
background-color: lightblue;
border: 1px solid blue;
}
.item-1 {
flex-basis: 150px; /* Fixed size of 150px */
}
</style>
</head>
<body>
<div class="container">
<div class="item item-1">Item 1</div>
<div class="item">Item 2</div>
</div>
</body>
</html>
In this example, Item 1 has a fixed size of 150px, while Item 2 will adjust its size based on the remaining space in the container.
Example 2: Percentage Basis
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
width: 600px; /* Fixed width for demonstration */
height: 100px;
background-color: lightgray;
}
.item {
height: 100%;
margin: 5px;
background-color: lightcoral;
border: 1px solid red;
}
.item-1 {
flex-basis: 40%; /* 40% of the container's width */
}
.item-2 {
flex-basis: 30%; /* 30% of the container's width */
}
</style>
</head>
<body>
<div class="container">
<div class="item item-1">Item 1</div>
<div class="item item-2">Item 2</div>
</div>
</body>
</html>
Here, Item 1 takes up 40% of the container’s width, while Item 2 takes up 30%.
Interaction with Other Flex Properties
flex-grow: Ifflex-basisis set to a fixed size or percentage,flex-growwill determine how the item grows beyond that base size if there is extra space in the container.flex-shrink: Ifflex-basisis set to a fixed size,flex-shrinkwill determine how the item shrinks below that base size if there is not enough space in the container.