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;