CSS flex-basis
CSS flex-basis
此CSS属性指定flex项目的初始大小。它仅适用于flex-items，因此，如果容器的项目不是flex-item，则
flex-basis 属性将不会影响相应的项目。通常，此 CSS属性与
flex-shrink 和< strong> flex-grow ，通常由
flex 速记定义，以确保设置了所有值。
flex-basis 属性将不会影响相应的项目。通常，此 CSS属性与
flex-shrink 和< strong> flex-grow ，通常由
flex 速记定义，以确保设置了所有值。
语法
flex-basis: auto | width | initial | inherit;
值
auto：是默认值。此值将项目的宽度设置为等于其width属性的值（如果已定义）。但是，如果未为flex-item指定width属性，则会根据内容设置宽度。
width：此值是使用相对或绝对单位定义的。它定义了弹性项目的初始长度。不允许负值。
initial：将属性设置为其默认值。
inherit：来自其父元素的属性。
现在，让我们通过一些示例来了解此属性。
示例
在此示例中，有一个包含五个flex-项目。在这里，我们设置了项目的不同值，例如
auto、initial、inherit和
150px 。我们并未定义
width 属性，因此
auto，initial 和
inherit 之类的值会根据内容设置宽度，但是存在
flex-basis: 150px; 的项目，因此相应项目的宽度为
150px。
auto、initial、inherit和
150px 。我们并未定义
width 属性，因此
auto，initial 和
inherit 之类的值会根据内容设置宽度，但是存在
flex-basis: 150px; 的项目，因此相应项目的宽度为
150px。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
background-color: lightblue;
}
.flex-item {
background-color: white;
text-align: center;
line-height: 40px;
font-size: 25px;
margin: 5px;
}
</style>
</head>
<body>
<h1> 示例 of the flex-basis property </h1>
<div class = "container">
<div class = "flex-item" style = "flex-basis: auto;"> auto </div>
<div class = "flex-item" style = "flex-basis: initial;"> initial </div>
<div class = "flex-item" style = "flex-basis: inherit;"> inherit </div>
<div class = "flex-item" style = "flex-basis: 150px;"> 150px </div>
<div class = "flex-item" style = "flex-basis: auto"> auto </div>
</div>
</body>
</html>
输出
示例
这是
flex-basis 属性的另一个示例。
flex-basis 属性的另一个示例。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 100px;
border: 2px solid red;
display: flex;
background-color: blue;
}
.container div{
padding-top: 25px;
flex-basis: 100px;
}
.flex-item{
text-align: center;
font-size: 25px;
}
.container div:nth-of-type(1) {
flex-basis: 50%;
}
.container div:nth-of-type(3) {
flex-basis: 200px;
}
.container div:nth-of-type(5) {
flex-basis: 7em;
}
</style>
</head>
<body>
<h1>
The flex-basis Property
</h1>
<div class = "container">
<div class = "flex-item" style= "background-color: lightblue;">
50%
</div>
<div class = "flex-item" style= "background-color: yellow;">
100px
</div>
<div class = "flex-item" style= "background-color: pink;">
200px
</div>
<div class = "flex-item" style= "background-color: orange;">
100px
</div>
<div class = "flex-item" style= "background-color: lightgreen;">
7em
</div>
</div>
</body>
</html>
输出
让我们看看如何使用
flex 速记属性定义
flex-basis 属性。
flex 速记属性定义
flex-basis 属性。
示例
在此示例中，我们通过使用速记
flex 属性来设置
flex-basis 属性。 flex属性是
flex-grow，flex-shrink 和
flex-basis 的简写。在这里，我们将
100px 值定义为
flex-basis ，其他两个值由
0 指定。
flex 属性来设置
flex-basis 属性。 flex属性是
flex-grow，flex-shrink 和
flex-basis 的简写。在这里，我们将
100px 值定义为
flex-basis ，其他两个值由
0 指定。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 100px;
border: 2px solid red;
display: flex;
}
.container div{
padding-top: 25px;
flex: 0 0 100px;
}
.flex-item{
text-align: center;
font-size: 25px;
}
</style>
</head>
<body>
<div class = "container">
<div class = "flex-item" style= "background-color: lightblue;">
1
</div>
<div class = "flex-item" style= "background-color: yellow;">
2
</div>
<div class = "flex-item" style= "background-color: pink;">
3
</div>
<div class = "flex-item" style= "background-color: orange;">
4
</div>
<div class = "flex-item" style= "background-color: lightgreen;">
5
</div>
</div>
</body>
</html>
输出
