CSS Flexbox layout z dwoma kolumnami

Krzysiek Furtak CSS/SCSS 0 Comments

Nie tak dawno pisałem o zastosowaniu właściwości flexbox do centrowania elementów w pionie. Możesz o tym przeczyć w artykule CSS Vertical Center i Flexbox.

Jak się sami przekonaliśmy flexbox jest bardzo uniwersalna i ekstremalnie prosta w użyciu. Dziś zrobimy layout składający się z dwóch kolumn.

Bez względu na wysokość dowolnek kolumny, druga automatycznie dostosuje swoją wysokość. Dzięki temu obydwie kolumny zawsze będą równe.

Kod HTML wydląda standardowo, nie ma tu żadnych niespodzianek.

<div class="flexbox">
<div>
<h3>Header 1</h3>
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.</p>
</div>
<div>
<h3>Header 2</h3>
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.</p>
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.</p>
</div>
</div>

Style także są bardzo proste, jednak niosą ze sobą dużo możliwości!

.flexbox {
display: -ms-flex;
display: -webkit-flex;
display: flex;
}

.flexbox > div {
width: 50%;
padding: 10px;
}

Każda kolumna otrzymała szerokość 50%. Kolumną możemy dodać dowolną wartość obramowania oraz paddingi nie martwiąc się o prawidłowe ułożenie. Fajne, prawda?! 🙂

Poniżej znajdziecie DEMO oraz miejsce, gdzie możecie się pobawić wysokością kolumn.

See the Pen gbQmBG by Krzysztof Furtak (@KrzysiekF) on CodePen.0