Właściwości elementów flex
Właściwości elementów flex, będące dziećmi kontenerów flex, odgrywają istotną rolę w projektowaniu nowoczesnych stron internetowych. Właściwości CSS związane z elementami flex umożliwiają dynamiczne i elastyczne zarządzanie układem oraz zachowaniem tych elementów wewnątrz kontenera flex. Dzięki temu, projektowane elementy mogą łatwo dostosowywać rozmiar, pozycję oraz kolejność elementów flex na różnych urządzeniach i rozdzielczościach ekranów, co jest kluczowe dla tworzenia responsywnych i atrakcyjnych interfejsów użytkownika.
Właściwości elementów flex
Elementy flex mają własne właściwości, które pozwalają na kontrolowanie ich pozycji i rozmiaru w kontenerze flex. Co jest niezwykle istotne podczas projektowania responsywnych strony internetowych.
order
order: – Określa kolejność elementów flex w kontenerze. Domyślnie wszystkie elementy mają wartość 0, a więc są układane według kolejności w kodzie HTML. Można ustawić wartość order dla poszczególnych elementów na liczby dodatnie lub ujemne, aby zmienić ich kolejność.
.item {
order: 0; /* wartości całkowite */
}flex-grow
flex-grow: – Określa, jak elementy flex mają się rozciągać, gdy jest dostępna wolna przestrzeń w kontenerze. Domyślnie elementy mają wartość 0, co oznacza, że nie będą się rozciągać. Wartość flex-grow musi być nieujemna. Jeśli ustawisz większą wartość dla jednego elementu, będzie on zajmować więcej dostępnej przestrzeni niż inne elementy.
.item {
flex-grow: 0; /* wartości nieujemne */
}flex-shrink
flex-shrink: – Określa, jak elementy flex mają się zachowywać, gdy brakuje miejsca w kontenerze. Domyślnie elementy mają wartość 1, co oznacza, że będą się kurczyć w miarę potrzeby. Wartość flex-shrink musi być nieujemna. Jeśli ustawisz większą wartość dla jednego elementu, będzie on się bardziej kurczyć niż inne elementy.
.item {
flex-shrink: 1; /* wartości nieujemne */
}flex-basis
flex-basis: – Określa początkowy rozmiar elementu flex przed rozciąganiem lub zmniejszeniem. Można ustawić wartość na długość (px, em, %, itp.) lub na auto, co oznacza, że rozmiar będzie oparty na zawartości elementu. Wartość flex-basis musi być nieujemna.
.item {
flex-basis: auto; /* wartości nieujemne lub auto */
}W praktyce zamiast ustawiać te trzy właściwości (flex-grow, flex-shrink i flex-basis) osobno, często używa się skróconej właściwości flex, która pozwala na jednoczesne ustawienie tych wartości razem. Składnia wygląda wówczas w następujący sposób: flex: <flex-grow> <flex-shrink> <flex-basis>.
.item {
flex: 0 1 auto; /* równoważne ustawieniu flex-grow: 0, flex-shrink: 1 i flex-basis: auto */
}Przykład użycia właściwości elementów flex:
.container {
display: flex;
}
.item-1 {
flex: 1 1 auto;
order: 1;
}
.item-2 {
flex: 2 1 auto;
order: 2;
}
.item-3 {
flex: 1 2 auto;
order: 3;
}W powyższym przykładzie kontener flex zawiera trzy elementy flex. Właściwości order są użyte, aby ustawić ich kolejność w kontenerze. Właściwości flex-grow, flex-shrink i flex-basis są ustawione za pomocą skróconej właściwości flex.
item-1ma wartośćorder: 1, co oznacza, że będzie pierwszy w kolejności. Wartośćflexustawiona na1 1 autooznacza, że element będzie się rozciągać i kurczyć z równym priorytetem względem pozostałych elementów.item-2ma wartośćorder: 2, co oznacza, że będzie drugi w kolejności. Wartośćflexustawiona na2 1 autooznacza, że element będzie się rozciągać dwukrotnie szybciej niż pozostałe elementy, ale kurczyć z takim samym priorytetem.item-3ma wartośćorder: 3, co oznacza, że będzie trzeci w kolejności. Wartośćflexustawiona na1 2 autooznacza, że element będzie się rozciągać z takim samym priorytetem jakitem-1, ale kurczyć dwukrotnie szybciej niż pozostałe elementy.
Warto zapamiętać
Właściwości elementów flex pozwalają na precyzyjne kontrolowanie pozycji i rozmiaru elementów w kontenerze flex, co ułatwia tworzenie responsywnych i elastycznych układów strony internetowych.
Czy ten poradnik był pomocny?
Mateusz Turek
Swoją przygodę z projektowaniem stron internetowych rozpocząłem z kursem od Komputer Świat wydanym w marcu 2003 roku w formie małej książeczki. Na przestrzeni 20 lat zaprojektowałem niezliczoną ilość witryn i aplikacji internetowych. Projektowałem dla małych i dużych firm takich jak Oriflame, Top Market, Bezpieczna Rodzina czy Helping Hand.
