CSS flex-basis屬性用法及代碼示例

此 CSS 屬性指定 flex 項的初始大小。它隻對 flex-items 起作用，所以如果容器的物品不是 flex-item，則 flex-basis 屬性不會影響對應的物品。通常，此 CSS 屬性與 flex-shrink 和 flex-grow 等其他 flex 屬性一起使用，通常由 flex 簡寫定義，以確保設置所有值。

用法

flex-basis:auto | width | initial | inherit;

值

auto:它是默認值。如果已定義，此值將項目的寬度設置為等於其寬度屬性的值。但是如果flex-item 沒有指定width 屬性，它會根據內容設置寬度。

width:該值是使用相對或絕對單位定義的。它定義了 flex-item 的初始長度。它不允許負值。

initial:它將屬性設置為其默認值。

inherit:它從其父元素繼承屬性。

現在，讓我們通過一些例子來理解這個屬性。

示例

在這個例子中，有一個容器有五個 flex-items。在這裏，我們設置項目的不同值，例如 auto、initial、inherit 和 150px。我們沒有定義寬度屬性，所以像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> Example 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 屬性的另一個示例。

<!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-grow、flex-shrink 和 flex-basis 的簡寫。這裏我們給flex-basis定義了100px的值，另外兩個用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>

輸出

相關用法

注：本文由純淨天空篩選整理自 CSS flex-basis property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。