Flexbox - ustawienie wysokości/szerokości bloku obok flex-basis

0

Siema, mam pytanie dotyczące flexboxa:

Flex-basis określa nam wysokość/szerokość flex-itemu w zależności od ustawienia osi main axis. Jeżeli main axis jest ustawiona na row, to wtedy jest to szerokość bloku. Jeżeli na column, to jest to wysokość.
Ok, ale może mi ktoś wytłumaczyć jak wtedy ustawić wielkość bloku na cross axis?

Czyli np mam ustawioną oś główną na row i flex-basis określa wtedy szerokość bloku, to jak mam ustawić jego wysokość?
Mam w zwykłym stylu CSS ustawić po prostu height? Czy skoro używam flexboxa, to lepiej to zrobić za pomocą align-self?

edit: a jednak coś źle przeczytałem - align-self pozwala nam nadpisać align-items dla pojedynczego bloku. Posiada takie same wartości jak align-items. Domyślna wartość to auto, czyli miej taką samą właściwość, jaką ma flex container w align-items.
Czyli za jego pomocą nie mogę chyba ustawić wysokości, czyli muszę po prostu użyć height?

0

czemu nie, używasz normalnie height w połączeniu z jednostkami vh, rem, % i wszystko powinno grać.

1

http://drakonica.pl/dokumenty/flexbox_zestawienie.htm#standardowe

Wyszukaj frazę: Definiuje domyślny rozmiar elementu przed/bez dzielenia przestrzeni. i masz tam przykłady flex-basis elementu dla kontenera z flex-direction ustawionego na row i column.

Używając align-items:stretch; kontenera, i align-self:stretch; elementu możesz wymusić rozciągnięcie elementów na całą dostępną wysokość cross axis (albo dostępną wysokość wiersza, jeśli ustawiłeś zawijanie wierszy w kontenerze). Jeśli potrzebujesz jakichś innych rozmiarów, używam min/max - width/height.

p.s. K... właśnie zdanie chciałam skończyć średnikiem. Nie zaglądam tu więcej :p

0

Czyli jak chce ustawić jakąś konkretną wysokość/szerokość, to MUSZĘ użyć height/witdh? Bo za pomocą align-self mogą jedynie rozciągnąć flex-item na cały wymiar rodzica.

0
kario97 napisał(a):

Czyli jak chce ustawić jakąś konkretną wysokość/szerokość, to MUSZĘ użyć height/witdh?

A jak chcesz konkretną wysokość/szerokość, bez konkretnej wartości? ;)

1
kario97 napisał(a):

Czyli jak chce ustawić jakąś konkretną wysokość/szerokość, to MUSZĘ użyć height/witdh? Bo za pomocą align-self mogą jedynie rozciągnąć flex-item na cały wymiar rodzica.

Tak. Align zasadniczo nie służy do deklarowania rozmiaru tylko sposobu wyrównania elementu(ów). Stretch działa podobnie jak wyjustowanie przy wyrównywaniu tekstu.

0

No właśnie chodziło mi o to, czy jedynym wyjściem jest użycie height/width, czy jest na to jakiś inny "flexboxowy" sposób, np jakaś instrukcja podobna do flex-basis, tylko dla wymiaru na cross axis.
Myślałem, że można to zrobić za pomocą align-self, ale zapomniałem, że align-self pozwala nam nadpisać align-items dla pojedynczego bloku i posiada takie same wartości jak align-items.

0

jakaś instrukcja podobna do flex-basis, tylko dla wymiaru na cross axis

Raczej nie ma niczego takiego.

1 użytkowników online, w tym zalogowanych: 0, gości: 1