https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-basis
CSS 属性 flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒(content-box)的尺寸。
当容器设置flex-direction为row或row-reverse时,flex-basis和width同时存在,flex-basis优先级高于width,也就是此时flex-basis代替项目的width属性。
当容器设置flex-direction为column或column-reverse时,flex-basis和height同时存在,flex-basis优先级高于height,也就是此时flex-basis代替项目的height属性。
需要注意的是,当flex-basis和width(或height),其中一个属性值为auto时,非auto的优先级更高。
示例
示例1
容器的宽度是400px,item1的flex-basis设置为100px,item2的flex-basis设置为150px,item3的flex-basis设置为auto,都没有设置flex-grow和flex-shrink属性,那么最终:
item1的宽度为100px
item1的宽度为150px
item3的宽度为150px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: flex;
width: 400px;
}
.item1 {
flex-basis: 100px;
background-color: blue;
}
.item2 {
flex-basis: 150px;
background-color: purple;
}
.item3 {
flex: auto;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">项目1</div>
<div class="item2">项目2</div>
<div class="item3">项目3</div>
</div>
</body>
</html>
示例2
容器的宽度是400px,item1的flex-basis设置为100px,item2的flex-basis设置为150px,item3的flex-basis设置为0,都没有设置flex-grow和flex-shrink属性,那么最终:
item1的宽度为100px
item1的宽度为150px
item3的宽度为字体宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: flex;
width: 400px;
background-color: pink;
}
.item1 {
flex-basis: 100px;
background-color: blue;
}
.item2 {
flex-basis: 150px;
background-color: purple;
}
.item3 {
flex: 0;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">项目1</div>
<div class="item2">项目2</div>
<div class="item3">项目3</div>
</div>
</body>
</html>