Flexbox - elastyczny układ strony www

Flexbox - elastyczny układ strony www

Układ strony www buduje się z elementów pudełkowych czyli bloków, które domyślnie mają właściwość display: block. Żeby to się trzymało kupy, pudełka wkładane są do większego pudełka, które staje się dla nich rodzicem.

Normalnie elementy blokowe układają się jeden pod drugim i wypełniają całą szerokość rodzica. Jeśli natomiast do elementu rodzica dodamy display:flex, wtedy elementy dzieci, które się w nim znajdują będą się układały jeden obok drugiego, podobnie jak przy użyciu float.  Elementy dzieci równają do lewej. Szerokość elementów uzależniona jest od ich zawartości. Gdy jest ona mniejsza od elementu rodzica to po prawej stronie zostaje pusta przestrzeń.

Dodatkowe ustawienia dla flex:

  1. order – możemy ustawić elementy dzieci w wybranej kolejności jeśli dodamy do dzieci właściwość order np. order: 1, order:2
  2. flex-grow – tą właściwość dodaje się do elementu dzieci tak aby zostały rozciągnięte na całą szerokość elementu rodzica nie zostawiając pustego miejsca po prawej stronie. Przeglądarka obliczy proporcje poszczególnych bloków. Blok flex-grow:1 będzie podstawą obliczeń. Flex-grow: 3 będzie 3 razy większy
  3. flex-basis – określa szerokość w procentach np. flex-basis: 30%. Wydaje się, że suma procentów musi wynosić 100%, ale nie koniecznie. Jeśli suma jest większa niż 100% elementy są ściskane tak aby zmieściły się w elemencie rodzica i nie wskakiwały na dół.
  4. flex-shrink – określa, który z elementów dzieci jest bardziej ścisnięty od innych. Elemetn flex-shrink: 2 będzie bardziej ściśnięty niż element flex-shrink:1
  5. flex-wrap – dodajemy do elementu rodzica aby kontrolować czy elementy dzieci będą przechodziły do nowej linii jeśli ich szerokość przekracza szerokość rodzica. Jeśli do rodzica dodamy właściwość flex-wrap :wrap to jego dzieci będą spadały poniżej jeśli się nie mieszczą i nie zostaną skurczone aby się upchały w elemencie rodzica.
  6. justify-content – dodajemy do elementu rodzica (wraz z flex-wrap: wrap) aby kontrolować ułożenie dzieci w poziomie. Np. justify-content: center spowoduje wypośrodkowanie dzieci
  7. align-content – dodajemy do elementu rodzica (wraz z flex-wrap: wrap) i wyrównuje on ułożenie dzieci w pionie
  8. height – dodane do rodzica powoduje, że wysokość jego dzieci rozciąga się do wysokości rodzica (pod warunkiem że dzieci są obok siebie i nie spadaja na dół) nawet jeśli ich zawartośc jest mniejsza niż rodzica. To jest ciekawa właściwość, która może rozwiązać problem równych kolumn, który do tej pory spędzał sen z powiek twórcom stron www.
  9. align-items – dodane do rodzica wyrównuje dzieci w pionie ale w ten sposob, że wysokość dzieci nie rozciąga się na całą wysokość rodzica, lecz dzieci ustawiają się równo w poziomie na określonej wysokości względem wiersza. Np. align-item: center spowoduje że dzieci ustawią się w rządku równo na środku rodzica w pionie.
  10. align-self – dodajemy do dziecka aby ustawić jego wyrównanie w pionie. Jego wysokość nie będzie rozciągana do wysokości rodzica, lecz ustawi się np. w środku w pionie jeśli dodamy align-self: center.
  11. flex-direction – dodane do rodzica ustawia dzieci wzdłuż poziomu (flex-direction: row – domyślne lub w odwrotnej kolejności flex-direction: row-reverse) lub wzdłuż pionu (flex-direction: column   lub w odwrotnej kolejności flex-direction: column-reverse). Czyli ustawienie column ustawi dzieci jedno pod drugim. W tym przypadku zmienią się ustawienia dotyczące rozmiarów, np. flex-basis będzie teraz tyczył się wysokości a nie szerokości.

 

Jak sie czyta opis tej właściwości to można dostać oczopląsu i dojść do wniosku, że nauczenie się tego przekracza nasze możliwości, po co tyle tego i lepiej już skorzystać z bootstrapa i nie zawracać sobie głowy. Niech robieniem takich układów zajmują się spece, którzy przy tym pracują na codzień. Poczekamy aż powstaną gotowce do wykorzystania. Ale…

Ten układ wydaje się idealnie przystosowany dla elastycznych stron przystosowanych do urządzeń mobilnych. I rzeczywiście jak piszą specjaliści flex jest najbardziej przystosowany do aplikacji i stron na małych ekranach. Dla dużych ekranów bardziej nadaje się technologia grid. I to jest też nowość.

 

 

na podstawie:

http://kodcss.pl/kurs-css/lekcje/dzial-1/elastyczny-uklad-elementow-html

A Complete Guide to Flexbox

 

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.