CSS Flexbox - flex-basis Property
CSS flex-basis property sets the initial size of a flex item on the main axis before distributing the remaining space among the flex items.
When an element has both flex-basis (other than auto) and width (or height in the case of flex-direction: column), flex-basis takes precedence.
Possible Values
-
<width> − A specific length value such as pixels (px), percentage (%) etc.
-
auto − The width value in horizontal writing mode and the height value in vertical writing mode; when both values are auto, the content value is used.
-
max-content − This value sets the intrinsic preferred width.
-
min-content − This value sets the intrinsic minimum width.
-
fit-content − Sets the maximum size of a container's content area, constrained between min-content and max-content, and determined by the content of the element.
-
content − It shows automatic sizing based on the content of the flex item.
Applies to
Flex items, including in-flow pseudo-elements
Syntax
<width>
flex-basis: 10em; flex-basis: 3px; flex-basis: 50%; flex-basis: auto;
Intrinsic sizing keywords
flex-basis: max-content; flex-basis: min-content; flex-basis: fit-content;
Automatically size based on the flex item's content
flex-basis: content;
CSS flex-basis - <width> Value
The following example demonstrates that flex-basis: 200px property sets the the initial size of the third flex item to the 200px −
<html> <head> <style> .flex-container { display: flex; background-color: green; } .flex-container div { background-color: yellow; padding: 10px; margin: 5px; height: 50px; } .flex-item { flex-basis: 200px; } </style> </head> <body> <div class="flex-container"> <div>Flex item 1</div> <div>Flex item 2</div> <div class="flex-item">Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> </div> </body> </html>
CSS flex-basis - auto Value
The following example demonstrates that flex-basis: auto property sets the the initial size of its content −
<html> <head> <style> .flex-container { display: flex; background-color: green; } .flex-container div { background-color: yellow; padding: 10px; margin: 5px; height: 50px; } .flex-item { flex-basis: auto; } </style> </head> <body> <div class="flex-container"> <div>Flex item 1</div> <div>Flex item 2</div> <div class="flex-item">Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> </div> </body> </html>
CSS flex-basis - max-content Value
The following example demonstrates that flex-basis: max-content property sets the the initial size of the third flex item to the size of its content −
<html> <head> <style> .flex-container { display: flex; background-color: green; } .flex-container div { background-color: yellow; padding: 10px; margin: 5px; height: 50px; } .flex-item { flex-basis: max-content; } </style> </head> <body> <div class="flex-container"> <div>Flex item 1</div> <div>Flex item 2</div> <div class="flex-item">Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> </div> </body> </html>
CSS flex-basis - min-content Value
The following example demonstrates that flex-basis: min-content property sets the the initial size of the third flex item to the minimum size required to contain its content −
<html> <head> <style> .flex-container { display: flex; background-color: green; } .flex-container div { background-color: yellow; padding: 10px; margin: 5px; height: 50px; } .flex-item { flex-basis: min-content; } </style> </head> <body> <div class="flex-container"> <div>Flex item 1</div> <div>Flex item 2</div> <div class="flex-item">Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> </div> </body> </html>
CSS flex-basis - fit-content Value
The following example demonstrates that flex-basis: fit-content property sets the the initial size of the third flex item to the size of its contents −
<html> <head> <style> .flex-container { display: flex; background-color: green; } .flex-container div { background-color: yellow; padding: 10px; margin: 5px; height: 50px; } .flex-item { flex-basis: fit-content; } </style> </head> <body> <div class="flex-container"> <div>Flex item 1</div> <div>Flex item 2</div> <div class="flex-item">Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> </div> </body> </html>
CSS flex-basis - content Value
The following example demonstrates that flex-basis: content property automatically determines its initial size based on the size of the flex item −
<html> <head> <style> .flex-container { display: flex; background-color: green; } .flex-container div { background-color: yellow; padding: 10px; margin: 5px; height: 50px; } .flex-item { flex-basis: content; } </style> </head> <body> <div class="flex-container"> <div>Flex item 1</div> <div>Flex item 2</div> <div class="flex-item">Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> </div> </body> </html>
To Continue Learning Please Login
Login with Google