Použitie flexboxu pre rozloženie prvkov

Úvod

Flexbox je výkonný nástroj pre rozloženie prvkov na webstránke. Naučíme sa základné použitie flexboxu.

1. HTML štruktúra

 <div class="container"> <div class="box">Prvok 1</div> <div class="box">Prvok 2</div> <div class="box">Prvok 3</div> </div> 

2. CSS štýly flexboxu

 .container { display: flex; flex-wrap: wrap; gap: 10px; }

.box {
flex: 1 1 150px;
padding: 20px;
background-color: #ffecb3;
text-align: center;
border-radius: 8px;
}

@media (max-width: 768px) {
.container {
flex-direction: column;
}
.box {
margin-bottom: 10px;
}
}

Záver

Flexbox umožňuje jednoduché a flexibilné rozloženie prvkov, ktoré sa automaticky prispôsobuje rôznym veľkostiam obrazovky.