Flexbox: elementy w jednym rzędzie

CSS: odstępy, ramki i układ - HTML i CSS: pierwsze strony (HTML/CSS/JS)

display: flex zmienia element w kontener, którego dzieci ustawiają się w rzędzie. gap ustala odstęp między nimi. justify-content rozkłada je w poziomie: center skupia na środku, space-between rozsuwa do krawędzi. align-items: center wyrównuje je w pionie, nawet gdy mają różną wysokość. Kontener rząd ma większą wysokość, więc widać to wyrównanie. Zmień center na space-between w justify-content i porównaj.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Flexbox</title>
  <style>
    .rzad {
      display: flex;
      gap: 20px;
      justify-content: center;
      align-items: center;
      height: 200px;
      border: 2px solid gray;
      background-color: #f5f5f5;
    }
    .kafel {
      width: 80px;
      padding: 10px;
      font-size: 40px;
      text-align: center;
      background-color: white;
      border: 2px solid orange;
      border-radius: 10px;
    }
    .duzy {
      padding: 40px 10px;
    }
  </style>
</head>
<body>
  <div class="rzad">
    <div class="kafel">🍎</div>
    <div class="kafel duzy">🍐</div>
    <div class="kafel">🍇</div>
  </div>
</body>
</html>

Ładowanie interaktywnego edytora... Jeśli się nie pojawi, włącz JavaScript.

Wszystkie lekcje kursu HTML i CSS: pierwsze strony · Zaloguj się, aby zapisać postęp na koncie.