Flexbox - właściwości elementu rodzica i dzieci

Flexbox - właściwości elementu rodzica i dzieci

Jeszcze raz nieco usystematyzowania wiadomości na temat flexbox:

Jeśli chodzi o ustawienie elementów wewnątrz elementu rodzica to ustawiają się one według głównej osi, która może być albo pozioma albo pionowa. Dosyć trudno to wytłumaczyć i lepiej to widać na obrazkach.

Właściwości dla elementu rodzica:

  1. display:flex – wstawiamy do elementu rodzica aby oznaczyć go jako flex, co będzie oddziaływało na dzieci, czyli elementy, które są w środku niego
  2. flex-direction – oznacza jak dzieci będą się układać według głównej osi rodzica.
      • row (domyślny): poziomo od lewej do prawej
      • row-reverse: poziomo prawej do lewej
      • column: w pionie od góry do dołu
      • column-reverse:w pionie od dołu do góry
    1. Układ będzie sie zmieniał w zależności od tego czy element jest ustawiony jako ltr czy rtl. W naszym systemie pisma stosujemy ltr czyli left to right bo piszemy od lewej. Ustawiamy przy pomocy: direction: rtl;
  3. flex-wrap – domyślnie elementy dzieci będą się układały w jednej linii od lewej do prawej i jesli są za szerokie będą się ścieśniały tak aby zmieściły się w elemencie rodzica – domyślnie: flex-wrap: nowrap
    • flex-wrap: wrap – dzieci będą zawijane, to znaczy te które się nie zmieszczą będą się w elemencie rodzica
    • flex-wrap: wrap-reverse -to samo tylko w odwrotnej kolejności
  4. flex-flow – skrócony zapis direction i wrap, domyślnie: flex-flow: row nowrap
  5. justify-content – ustawia elementy dzieci poziomo według głównej osi i kontroluje wolne miejsce jakie zostaje jeśli dzieci są mniejsze. Ma na celu takie ustawienie elementów wewnętrznych żeby to ładnie wyglądało i były one ładnie ułożone według linii na której są.
    • justify-content: flex-start – dzieci będą równały do początku zostawiając miejsce na końcu
    • justify-content: flex-end – dzieci będą równały do końca zostawiając miejsce na początku
    • justify-content: center – dzieci będą wypośrodkowane
    • justify-content: space-between – dzieci będą równo rozłożone tak, będą równać do obu brzegów i zostanie miejsce między nimi
    • justify-content: space-around – dzieci będą równo rozłożone tak, że zostanie miejsce zarówno między nimi jak przy brzegach
  6. align-items – oznacza wyrównanie pionowe względem głównej osi. Jeśli oś jest pozioma to:
    • align-items : flex-start – wyrówna dzieci do góry
    • align-items :flex-end – wyrówna dzieci do dołu
    • align-items :center – wypośrodkuje względem głównej osi czyli tyle samo będzie wystawało z jednej i z drugiej strony
    • align-items :baseline – dzieci będą tak ustawione jak będzie ustawiony ich baseline
    • align-items :stretch – ustawienie domyślne – rozciągnie elementy dzieci na całą wysokość lub szerokość
  7. align-content – jest podobna do justify-content ale działa wtedy gdy elementów dzieci jest dużo i ustawiają się w wielu liniach. Jeśli będzie ich kilka tak że zmieszczą się w jednej linii, ta właściwośc nie ma sensu. Właściwośc ta ma na celu ułożenie dużej ilości elementów wewnętrznych tak aby wolne miejsce zostało tam gdzie chcemy. Tu jednak też zostanie wolne miejsce, jeśli ostatni rządek jest za krótki.
    • align-content: flex-start – dzieci skupią się na początku i nie rozciągną się
    • align-content: flex-end – dzieci skupią się na końcu i nie rozciągną się
    • align-content: center – dzieci w środku skupione i nie rozciągną się, wolne miejsce zostanie u góry i u dołu
    • align-content: space-between – dzieci w środku i nie rozciągną się, wolne miejsce zostanie między rzędami
    • align-content: space-around – dzieci w środku i nie rozciągną się, wolne miejsce zostanie u góry i u dołu oraz między rzędami
    • align-content: stretch – dzieci będą równo rozłożone  i rozciągną się tak, że zajmą równo całą przestrzeń

Właściwości elementów dzieci:

Właściwości nadawane poszczególnym dzieciom.

  1. order – kolejność w jakiej są wyświetlane
  2. flex-grow – rozciągnięcie poszczególnych dzieci w szerz, jesli nadamy wszystkim wartość 1 to będą mialy równą szerokość. Jeśli jeden będzie miał wartość 2 to będzie 2 razy szerszy
  3. flex-srchrink – kurczenie się elementów
  4. flex-basis – określa jak elementy będą rozciągane aby wypelniły całą wielkość rodzica. Ustawiony na auto (domyslny) równo rozciągnie wszystkie elementy. Ustawiony na 1 nie bedzie rozciągał, czyli ostatni element będzie rozciągnięty
  5. align-self – to samo co align-items dla rodzica ale ustawione dla poszczególnego dziecka

 

na podstawie: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

2 Comments
Leave a reply

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

This site uses Akismet to reduce spam. Learn how your comment data is processed.