CSS flex-basis 属性值说明
| 值 | 描述 |
|---|---|
| number | 指定“自动”，“继承”或者数字后跟“％”，“PX”，“EM”等项目（item）（item）的长度。 |
| auto | 此值是此属性的默认值。长度等于灵活的项目（item）（item）的长度。如果没有指定的项目（item）（item）长度，则会根据其内容。 |
| initial | 将属性设置为默认值。 |
| inherit | 从其父元素继承此属性。 |
flex-basis 属性指定灵活项目（item）（item）的初始主尺寸。
当不包括此属性时，其值设置为 0%。
flex-basis 属性是 CSS3 属性之一。
如果没有弹性项目（item）（item），则 flex-basis 属性将不起作用。
当 flex-basis 的值不是 auto 和 width （或者 flex-direction 的值设置为 column 时的高度）被设置时， flex-basis 属性将具有优先权。
| 初始值 | auto |
|---|---|
| 应用于 | Flex项目（item）（item），包括流中的伪元素。 |
| 继承 | 无效 |
| 可动画的 | Items是可以动画的。 |
| 版本 | CSS3. |
| DOM 语法 | object.style.flexbasis =“100px”; |
语法
flex-basis: number | auto | initial | inherit;
flex-basis 属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 300px;
height: 80px;
border: 1px solid #666;
display: -webkit-flex; /* Safari */
display: flex;
}
.box div {
-webkit-flex-grow: 0; /* Safari 6.1+ */
-webkit-flex-shrink: 0; /* Safari 6.1+ */
-webkit-flex-basis: 40px; /* Safari 6.1+ */
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40px;
}
.box div:nth-of-type(2) {
-webkit-flex-basis: 140px; /* Safari 6.1+ */
flex-basis: 140px;
}
</style>
</head>
<body>
<h2>Flex-basis 属性示例</h2>
<div class="box">
<div style="background-color: #eeeeee;">40px</div>
<div style="background-color: #1c87c9;">140px</div>
<div style="background-color: #8ebf42;">40px</div>
<div style="background-color: #cccccc;">40px</div>
<div style="background-color: #666666;">40px</div>
</div>
</body>
</html>
具有所有值的 flex-basis 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
height: 70px;
display: flex;
}
.box div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 60px;
padding: 15px;
/* For Safari 6.1 and above browsers */
-webkit-flex-grow: 0;
-webkit-flex-shrink: 0;
-webkit-flex-basis: 60px;
}
.box div:first-child {
background-color: #40c3da;
}
.box div:nth-of-type(2) {
flex-basis: 40%;
-webkit-flex-basis: 40%;
background-color: lightgreen;
}
.box div:nth-of-type(3) {
flex-basis: auto;
-webkit-flex-basis: auto;
background-color: yellow;
}
.box div:nth-of-type(4) {
flex-basis: initial;
-webkit-flex-basis: initial;
background-color: orange;
}
.box div:nth-of-type(5) {
flex-basis: inherit;
-webkit-flex-basis: inherit;
background-color: pink;
}
</style>
</head>
<body>
<h2>Flex-basis 属性示例</h2>
<div class="box">
<div>
number 60px
</div>
<div>
percentage 40%
</div>
<div>
auto
</div>
<div>
initial
</div>
<div>
inherit
</div>
</div>
</body>
</html>
以像素为单位指定的 flex-basis 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 460px;
height: 70px;
display: flex;
}
.box div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 70px;
padding: 15px;
/* For Safari 6.1 and above browsers */
-webkit-flex-grow: 0;
-webkit-flex-shrink: 0;
-webkit-flex-basis: 70px;
}
.box div:first-child {
background-color: #40c3da;
}
.box div:nth-of-type(2) {
flex-basis: 100px;
-webkit-flex-basis: 100px;
background-color: lightgreen;
}
.box div:nth-of-type(3) {
background-color: #1c87c9;
}
.box div:nth-of-type(4) {
flex-basis: 150px;
-webkit-flex-basis: 150px;
background-color: orange;
}
.box div:nth-of-type(5) {
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Flex-basis 属性示例</h2>
<div class="box">
<div>
70px
</div>
<div>
100px
</div>
<div>
70px
</div>
<div>
150px
</div>
<div>
70px
</div>
</div>
</body>
</html>
日期：2020-06-02 22:14:29 来源：oir作者：oir