The flex-basis property defines the default size of an element before the remaining space is distributed. It can be a length (e.g., px, %, em) or the keyword auto, which respects the item's width or height property.
Example 1: Setting a Pixel Basis
.flex-container {
display: flex;
width: 600px;
border: 1px solid #000;
}
.flex-item {
height: 100px;
background-color: peru;
border: 1px solid #000;
flex-basis: 150px; /* Sets the initial size of the item to 150px */
}
Explanation
Here, flex-basis: 150px sets the initial main size of the flex items to 150 pixels. If there is remaining space, flex-grow would apply; if there's not enough space, flex-shrink would come into play.
Example 2: Using auto
.flex-container {
display: flex;
width: 700px;
border: 1px solid #000;
}
.flex-item {
width: 120px;
height: 100px;
background-color: plum;
border: 1px solid #000;
flex-basis: auto; /* The item's width property is used as the basis */
}
Explanation
With flex-basis: auto, the item's width of 120px is used as its initial size. This is the default behavior if flex-basis is not explicitly set.
Example 3: Percentage Basis
.flex-container {
display: flex;
width: 800px;
border: 1px solid #000;
}
.flex-item {
height: 100px;
background-color: powderblue;
border: 1px solid #000;
flex-basis: 25%; /* Each item's initial size is 25% of the container's width */
}
Explanation
Using a percentage for flex-basis makes the initial size of flex items relative to their container's size. Here, each of the four items will have a base width of 25% of the 800px container.
Example 4: flex-basis with flex-grow
.flex-container {
display: flex;
width: 600px;
border: 1px solid #000;
}
.flex-item {
height: 100px;
background-color: rosybrown;
border: 1px solid #000;
flex-basis: 100px;
flex-grow: 1; /* Items start at 100px and then share the remaining space */
}
Explanation
In this scenario, each item starts with a flex-basis of 100px. The remaining space in the container is then distributed equally among the items because their flex-grow is set to 1.
Example 5: flex-basis with flex-shrink
.flex-container {
display: flex;
width: 400px;
border: 1px solid #000;
}
.flex-item {
height: 100px;
background-color: darkkhaki;
border: 1px solid #000;
flex-basis: 200px; /* Initial size is larger than what can fit */
flex-shrink: 1;
}
Explanation
The total flex-basis of the items (600px) is greater than the container's width (400px). Because flex-shrink is 1, the items will shrink from their 200px basis to fit inside the container.
Example 6: flex-basis: 0
.flex-container {
display: flex;
width: 500px;
border: 1px solid #000;
}
.flex-item {
height: 100px;
background-color: tan;
border: 1px solid #000;
flex-basis: 0;
flex-grow: 1;
}
.double {
flex-grow: 2;
}
Explanation
Setting flex-basis: 0 tells the items to disregard their content size. The entire space of the container is then distributed according to the flex-grow factor, making the .double item twice the size of the others.
Example 7: flex-basis and content
.flex-container {
display: flex;
width: auto; /* Container width is determined by content */
border: 1px solid #000;
}
.flex-item {
height: 100px;
background-color: thistle;
border: 1px solid #000;
flex-basis: content; /* The item's size is based on its content */
}
Explanation
The content keyword for flex-basis sizes the flex item based on its content. This is useful when you want the item's size to be determined by the text or other elements inside it.