KATEGORIA:

ELEMENTY RÓWNEJ WYSOKOŚCI

równa wysokość elementów css

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:

flexbox

I efekt bez niego:

flexbox

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.

Dodaj komentarz

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