📌  相关文章
📜  HTML | DOM 样式 flexBasis 属性(1)

📅  最后修改于: 2023-12-03 14:41:50.058000             🧑  作者: Mango

HTML | DOM 样式 flexBasis 属性

简介

flexBasis 属性定义了弹性盒子元素在主轴方向上的初始尺寸，即在弹性布局中对应元素的 flex-basis 属性。

语法

flexBasis 属性有以下语法：

flexBasis: auto|length|initial|inherit;
  • auto：浏览器根据元素的 width 或 height 属性来计算弹性盒子元素应有的初始主轴尺寸；
  • length：指定弹性盒子元素的固定尺寸；
  • initial：设置元素的初始值；
  • inherit：从父元素或祖先元素继承该属性。

flexBasis 属性也可以单独指定某个尺寸（如宽度、高度）：

flexBasis: 60%;
flexBasis: 200px;
实例

下面是一个示例代码，演示了 flexBasis 的用法：

<!DOCTYPE html>
<html>
<head>
	<title>flexBasis 属性示例</title>
	<style>
		.box {
			display: flex;
			flex-direction: row;
			background-color: #f1f1f1;
			padding: 10px;
			margin-bottom: 10px;
		}
		
		.box div {
			background-color: #f0e68c;
			border: 1px solid #e6e6e6;
			padding: 10px;
			margin-right: 10px;
		}
		
		.box div:last-child {
			margin-right: 0;
		}
		
		.width-50 {
			flex-basis: 50%;
		}
		
		.width-40 {
			flex-basis: 40%;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="width-50">50% 宽度</div>
		<div class="width-50">50% 宽度</div>
	</div>
	<div class="box">
		<div class="width-40">40% 宽度</div>
		<div class="width-60">60% 宽度</div>
	</div>
</body>
</html>

这段代码定义了一个 .box 盒子，其中包含了两个子元素，它们的宽度分别为 50% 和 50%。然后定义了一个类 .width-50，它将子元素的 flexBasis 属性设置为 50%，使该子元素在主轴方向上的尺寸为该盒子宽度的一半。

再定义了另一个类 .width-40，将该子元素的尺寸设置为盒子宽度的 40%，这样它的右侧的子元素就被分配了剩余的 60% 宽度。

总结

flexBasis 属性用于设置弹性盒子元素在主轴方向上的初始尺寸，可选值有 auto、length、initial 和 inherit。

在使用时需要注意：

  • 它只有在弹性盒子容器中才会生效；
  • 它并不影响弹性盒子元素在交叉轴方向上的尺寸；
  • 它并不影响元素的最终尺寸，如果确定元素的最终尺寸，应该使用 flex 属性。