ELEMENTY RÓWNEJ WYSOKOŚCI
JAK NADAĆ ELEMENTOM JEDNAKOWĄ WYSOKOŚĆ?
Flexbox to sposób składu stron, z którego skorzystamy, aby rozwiązać problem wysokości kolumn. Nie będziemy korzystać z tabeli – zostawimy ją do przedstawiania danych tabelarycznych.
Tworzymy dowolny pojemnik, który będzie zawierał w sobie nasze kolumny. W moim przykładzie będzie to div o klasie container oraz dwa divy wewnątrz niego: left i right.
<div class="container">
<div class="left">
<h2> Tytul</h2>
</div>
<div class="right">
<p> Lorem Ipsum jest tekstem stosowanym jako przykladowy wypelniacz w przemysle poligraficznym.
Zostal po raz pierwszy uzyty w XV w. przez nieznanego drukarza do wypelnienia tekstem
probnej ksiazki. Piec wiekow pozniej zaczal byc uzywany przemsle elektronicznym,
pozostajac praktycznie niezmienionym. Spopularyzowal sie w latach 60. XX w. wraz z
publikacja arkuszy Letrasetu, zawierajacych fragmenty Lorem Ipsum, a ostatnio z
zawierajacym rozne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji
drukow na komputerach osobistych, jak Aldus PageMaker. </p>
</div>
</div>
Teraz należy dodać style do naszych divów. Najważniejszy jest display: flex
. Jeżeli dodamy display: flex
do pojemnika otaczającego kolumny to będą one jednakowej wysokości. Użyłam jeszcze kolorów tła, aby rozróżnić kolumny i uwydatnić efekt.
.container{
display: flex;
}
.container div{
width: 50%;
}
.left{
background: green;
}
.right{
background: red;
}
Efekt z użyciem flexboxa:
I efekt bez niego:
Dzieje się tak dlatego, że kiedy ustawiamy display: flex
to automatycznie ustawiamy align-items: stretch
– czyli dzieci, elementy kontenera będą się rozciągać na całą wysokość, dopasowując się do siebie nawzajem. Oczywiście możemy to zmienić bo opcji jest dużo więcej.
Wszystkie opcje umieściłam w osobnym wpisie: FLEXBOX – ściąga.