Flexbox

Wyrównanie zawartości w CSS najprościej jest uzyskać poprzez dołączenie do projektu, któregoś z popularnych frameworków front-endowych. Przykładowo w Bootstrap czy Foundation wykorzystując GRID wystarczy tylko używać odpowiednich klas.

Jednak nie jesteśmy skazani na korzystanie z Frameworków, bo z pomocą przychodzi nam Flexbox w CSS3. Uwaga justify-content jest wspierany powyżej Safari 5 oraz IE 10, a align-content powyżej Safari 6 i również IE10.

Justify-content:

display: flex; – najpierw deklaracja stylu konteneru – to w jego wnętrzu będą układane elementy
justify-content: initial | center | flex-start | flex-end | space-between | space-around;

Ułożenie elementów następuje w sposób taki jak zaprezentowany poniżej (zmieniaj używając niebieskiego MENU):


Align-content:

display: flex; – podobnie jak powyżej najpierw deklaracja stylu
flex-wrap: wrap; – zawijanie elementów do kolejnego wiersza (bez tego wszystkie prostokąty byłyby umieszczone w jednej linii)
align-content: initial | center | flex-start | flex-end | space-between | space-around | stretch | inherit;

Tutaj również ułożenie elementów można sprawdzić poniżej (zmieniaj używając niebieskiego MENU):

.
.
.
.

Kluczowe w powyższych przykładach jest to, że najpierw musi być stworzony element, wewnątrz którego będzie działał Flexbox. Musi on mieć swoją szerokość i wysokość – obie odpowiednio większe, żeby w ogóle zobaczyć efekt działania. Kluczowy fragment kodu z powyższego:

HTML

< div id="wrapper2">
    < div class="wid2"> < /div>
    < div class="wid2"> < /div>
    < div class="hei2"> < /div>
    < div class="hei2"> < /div>
< /div>

CSS

.wid2 {
  background-color: red;
  width: 45%;
  height: 30px;
}
.hei2 {
  background-color: green;
  width: 60%;
}
#wrapper2 {
  width: 100%;
  height: 300px;
  border: solid 1px black;
  display: flex;
  flex-wrap: wrap;	
  justify-content:center; 
}

Artykuł ten nie wyczerpuje tematu Flexbox ponieważ nie wspomniałem tutaj o wszystkim. Zachęcam do samodzielnego zgłębiania tematu, a sam podpowiem tylko jeszcze dwie interesujące możliwości:

Zamiana kolejności wyświetlania elementów przy użyciu:
order: liczba;

Wyświetlanie obiektów wyrównanych do linii bazowej przy użyciu:
align-items: baseline;

Kontynuując przeglądanie strony, wyrażasz zgodę na używanie przez nas plików cookies. dowiedz się więcej

Aby zapewnić Tobie najwyższy poziom realizacji usługi, opcje ciasteczek na tej stronie są ustawione na "zezwalaj na pliki cookies". Kontynuując przeglądanie strony bez zmiany ustawień lub klikając przycisk "Akceptuję" zgadzasz się na ich wykorzystanie.

Zamknij