DEV Community

Cover image for Flexbox Layout – część 2 – children items
Dawid Ryłko
Dawid Ryłko

Posted on • Originally published at dawidrylko.com on

Flexbox Layout – część 2 – children items

Rozdysponowanie elementów wewnątrz kontenera wcale nie jest takie proste. Czas na drugi wpis z serii Flexbox Layout , tym razem poświęcony potomkom kontenera – czyli children items.

Artykuł stanowi kontynuację serii. Pierwszy artykuł możesz przeczytać, klikając w: Flexbox Layout – część 1 – parent container.

Flex children - kontener nadrzędny z kontenerami w środku. Czerwony tekst 'Potomkowie', z którego wychodzą cztery czerwone strzałki skierowane na kontenery w środku.

Flex items to wszystkie obiekty wewnątrz kontenera z zadeklarowaną wartością flex. To właśnie operacje na potomkach oraz przypisanie im odpowiednich styli sprawiają, że cały układ zachowa się w możliwie najlepszy (co za tym idzie najbardziej optymalny) sposób.

Właściwości potomka (children items)

Flexbox Layout – Order

.item {
  order: NUMBER; /* default 0 */
}
Enter fullscreen mode Exit fullscreen mode

Flex order - przedstawiona została kolejność kontenerów flexbox: (1, 2, 3, 4), (1, 1, 1, 2), (-2, -1, 0, 6), (1, 2, 3, 4).

Standardowo elementy w kontenerze są ułożone w kolejności występowania w pliku HTML. Kolejnością można jednak bez problemu sterować poprzez zastosowanie właściwości order.

Flexbox Layout – Flex grow

.item {
  flex-grow: NUMBER; /* default 0 */
}
Enter fullscreen mode Exit fullscreen mode

Właściwość flex-grow umożliwia elementom powiększenie się, jeśli tego potrzebują. Przedstawiona właściwość przyjmuje wartość numeryczną. Wartość ta jest proporcją , zadeklarowanego dla elementu miejsca, względem całego wykorzystanego miejsca wewnątrz kontenera flex.

Flex grow - przedstawiona została szerokość kontenerów flexbox. W pierwszym rzędzie kontenery mają taką samą szerokość (1). W drugim rzędzie jeden kontener jest dwa razy szerszy (2) niż pozostałe (1).

Jeśli wszystkim elementom wewnątrz kontenera zostanie przyporządkowana właściwość flex-grow: 1, to kontener rozdysponuje miejsce w taki sposób, aby wszystkie elementy dostały tyle samo miejsca. Jeśli zadeklarujemy wybranemu elementowi flex-grow: 2, a pozostałym flex-grow: 1, to wybrany element dostanie dwie wartości przypadające z podziału.

Ujemne wartości zostają oznaczone jako błędne.

Flexbox Layout – Flex shrink

.item {
  flex-shrink: NUMBER; /* default 1 */
}
Enter fullscreen mode Exit fullscreen mode

Właściwość flex-shrink pozwala elementom na zmniejszanie się, jeśli jest to potrzebne.

Ujemne wartości zostają oznaczone jako błędne.

Flexbox Layout – Flex basis

.item {
  flex-basis: auto | SIZE; /* default auto */
}
Enter fullscreen mode Exit fullscreen mode

Podstawową wielkość elementu wewnątrz flexible container uzyskujemy dzięki właściwości flex-basis. Brak zadeklarowanej wartości oznacza przyjęcie domyślnej – czyli auto. Inne wykorzystanie tej właściwości to podanie długości – np. 200px, 20em, 20% itp.

Flexbox Layout – Flex

.item {
  flex: none | [FLEX_GROW FLEX_SHRINK || FLEX_BASIS];
}
Enter fullscreen mode Exit fullscreen mode

flex jest skrótem dla flex-grow, flex-shrink oraz flex-basis. Wg rekomendacji W3C zaleca się używanie właśnie tej właściwości, zamiast deklarowania wszystkich powyższych. Ponadto, przy niezadeklarowaniu wszystkich właściwości, skrót flex uzupełnia je automatycznie (kolejno 0 1 auto).

Kolejny wpis z tej serii poświęcony będzie wyrównaniu kontenera i elementów znajdujących się wewnątrz niego.

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

The discussion has been locked. New comments can't be added.