CSS flex-basis-Eigenschaft
Die flex-basis-Eigenschaft gibt die initiale Hauptgröße eines flexiblen Elements an. Wenn diese Eigenschaft nicht angegeben ist, beträgt ihr Anfangswert auto.
Die flex-basis-Eigenschaft ist eine der CSS3-Eigenschaften.
Wenn es keine flexiblen Elemente gibt, hat die flex-basis-Eigenschaft keine Auswirkung.
Wenn flex-basis auf eine bestimmte Länge oder einen Prozentsatz festgelegt ist, hat es Vorrang vor width (bzw. height, wenn flex-direction column ist) bei der Bestimmung der initialen Hauptgröße des Elements.
Hinweis: Die Kurzschreib-Eigenschaft flex legt flex-basis zusammen mit flex-grow und flex-shrink fest. Wenn flex angegeben ist, hat es Vorrang vor der eigenständigen flex-basis-Eigenschaft.
| Anfangswert | auto |
|---|---|
| Anwendbar auf | Flex-Elemente, einschließlich in-Flow-Pseudo-Elemente. |
| Vererbbar | Nein. |
| Animierbar | Ja. Elemente sind animierbar. |
| Version | CSS3 |
| DOM-Syntax | object.style.flexBasis = "100px"; |
Syntax
Syntax der CSS flex-basis-Eigenschaft
flex-basis: length | percentage | auto | initial | inherit | min-content | max-content | fit-content | content;Grundlegendes Beispiel
Beispiel für die CSS flex-basis-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 300px;
height: 80px;
border: 1px solid #666;
display: flex;
}
.box div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40px;
}
.box div:nth-of-type(2) {
flex-basis: 140px;
}
</style>
</head>
<body>
<h2>Flex-basis property example</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>Ergebnis
Beispiel mit allen Werten
Beispiel der flex-basis-Eigenschaft mit allen Werten:
<!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;
}
.box div:first-child {
background-color: #40c3da;
}
.box div:nth-of-type(2) {
flex-basis: 40%;
background-color: lightgreen;
}
.box div:nth-of-type(3) {
flex-basis: auto;
background-color: yellow;
}
.box div:nth-of-type(4) {
flex-basis: initial;
background-color: orange;
}
.box div:nth-of-type(5) {
flex-basis: inherit;
background-color: pink;
}
</style>
</head>
<body>
<h2>Flex-basis property example</h2>
<div class="box">
<div>
number 60px
</div>
<div>
percentage 40%
</div>
<div>
auto
</div>
<div>
initial
</div>
<div>
inherit
</div>
</div>
</body>
</html>Beispiel mit Pixelwerten
Beispiel der flex-basis-Eigenschaft, angegeben in Pixeln:
<!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;
}
.box div:first-child {
background-color: #40c3da;
}
.box div:nth-of-type(2) {
flex-basis: 100px;
background-color: lightgreen;
}
.box div:nth-of-type(3) {
background-color: #1c87c9;
}
.box div:nth-of-type(4) {
flex-basis: 150px;
background-color: orange;
}
.box div:nth-of-type(5) {
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Flex-basis property example</h2>
<div class="box">
<div>
70px
</div>
<div>
100px
</div>
<div>
70px
</div>
<div>
150px
</div>
<div>
70px
</div>
</div>
</body>
</html>Werte
| Wert | Beschreibung | Ausführen |
|---|---|---|
| length | percentage | Gibt eine feste Größe mit Einheiten wie px, em, rem oder einem Prozentsatz (%) an. | Ausführen » |
| auto | Der Standardwert. Die Größe des Elements wird durch seinen Inhalt oder die width/height-Eigenschaften bestimmt. | Ausführen » |
| initial | Legt die Eigenschaft auf ihren Standardwert fest. | Ausführen » |
| inherit | Erbt diese Eigenschaft von ihrem übergeordneten Element. | |
| min-content | Passt die Größe des Elements an die minimale Inhaltsbreite/-höhe an. | Ausführen » |
| max-content | Passt die Größe des Elements an die maximale Inhaltsbreite/-höhe an. | Ausführen » |
| fit-content | Passt die Größe des Elements basierend auf der fit-content-Funktion an. | Ausführen » |
| content | Passt die Größe des Elements basierend auf seinem Inhalt an. | Ausführen » |
Praxis
Was bewirkt die 'flex-basis'-Eigenschaft in CSS?