CSS Flexbox - flex-basis 属性

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>

打印本页