CSS flex-basis 属性在将剩余空间分配给 flex 项之前，在主轴上设置 flex 项的初始大小。
当元素同时具有 flex-basis（auto 除外）和宽度（或在 flex-direction： column 的情况下为 height）时，flex-basis 优先。
可能的值
<width> - 特定的长度值，如像素（px）、百分比（%）等。
- auto − 横写模式下的宽度值和竖向书写模式下的高度值;当两个值都是 AUTO 时，将使用 Content 值。
- max-content − 此值设置固有的首选宽度。
- min-content − 此值设置固有的最小宽度。
- fit-content − 设置容器内容区域的最大大小，在最小内容和最大内容之间约束，并由元素的内容确定。
- content - 它显示根据 flex 项目的内容自动调整大小。
适用于
Flex 项目，包括流入伪元素
语法
<width>
flex-basis: 10em;
flex-basis: 3px;
flex-basis: 50%;
flex-basis: auto;
内在大小调整关键字
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;
根据 flex 项目的内容自动调整大小
flex-basis: content;
CSS flex-basis - <width> 值
以下示例演示了 flex-basis： 200px 属性将第三个 flex 项的初始大小设置为 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 - 自动值
以下示例演示了 flex-basis： auto 属性设置其内容的初始大小 -
<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 值
以下示例演示了 flex-basis： max-content 属性将第三个 flex 项的初始大小设置为其内容的大小 -
<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 - 最小内容值
以下示例演示了 flex-basis： min-content 属性将第三个 flex 项的初始大小设置为包含其内容所需的最小大小 -
<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 值
以下示例演示了 flex-basis： fit-content 属性将第三个 flex 项的初始大小设置为其内容的大小 -
<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 - 内容值
以下示例演示了 flex-basis： content 属性根据 flex 项的大小自动确定其初始大小 -
<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>
