Właściwość flex-basis

Właściwość flex-basis ustawia rozmiar konkretnego bloku flex przed zastosowaniem do niego pozostałych właściwości flex. Ogólnie, właściwość ustawia rozmiar elementu wzdłuż osi głównej. Oznacza to, że jeśli oś główna jest pozioma - ta właściwość będzie ustawiać szerokość elementów, a jeśli pionowa - to wysokość.

Stosuje się do konkretnego bloku flex.

Ta właściwość jest częścią składową właściwości-skrótu flex.

Składnia

selektor {
	flex-basis: dowolne jednostki CSS (i procenty) | auto;
}

Wartość domyślna: auto.

Przykład

Załóżmy, że oś główna jest ustawiona poziomo, a flex-basis ma wartość 50px. W tym przypadku szerokość elementów wyniesie 50px:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent	{
	display: flex;
	flex-direction: row; /* oś pozioma */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px; /* rozmiar elementu */
	border: 1px solid green;
}

Przykład

Obróćmy teraz oś, nie zmieniając wartości właściwości flex-basis. W tym przypadku wysokość elementów wyniesie 50px:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent {
	display: flex;
	flex-direction: column; /* oś pionowa */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Zobacz też

właściwość flex-direction,
która ustawia kierunek osi bloków flex
właściwość justify-content,
która ustawia wyrównanie wzdłuż osi głównej
właściwość align-items,
która ustawia wyrównanie wzdłuż osi poprzecznej
właściwość flex-wrap,
która ustawia zawijanie bloków flex
właściwość flex-flow,
skrót dla flex-direction i flex-wrap
właściwość order,
która ustawia kolejność bloków flex
właściwość align-self,
która ustawia wyrównanie pojedynczego bloku
właściwość flex-grow,
która ustawia "zachłanność" bloków flex
właściwość flex-shrink,
która ustawia skalowalność bloków flex
właściwość flex,
skrót dla flex-grow, flex-shrink i flex-basis