InnoMarts logo
InnoMarts
Fast websites
← Back to course

Layout z Flexbox

Layout z Flexbox

Witaj ponownie.

W poprzedniej lekcji poznałeś box model.

Content.

Padding.

Border.

Margin.

Wielka rodzina pudełek.

Teraz nauczymy się ustawiać te pudełka ładnie na stronie.

Tutaj wchodzi Flexbox.

Flexbox jest jednym z najbardziej użytecznych narzędzi layoutu w CSS.

Pomaga wyrównywać elementy w rzędach albo kolumnach.

Pomaga centrować rzeczy.

Pomaga tworzyć navbar, cards, przyciski, sekcje i layouty bez całkowitej utraty zdrowia psychicznego.

Tylko częściowej.

To nadal CSS.

Czego Się Nauczysz

W tej lekcji nauczysz się:

Czym Jest Flexbox?

Flexbox oznacza Flexible Box Layout.

To system layoutu CSS zaprojektowany do organizowania elementów w jednym kierunku.

Ten kierunek może być:

Row idzie od lewej do prawej.

Column idzie z góry na dół.

Flexbox jest idealny, gdy chcesz uporządkować elementy.

Na przykład:

Przed Flexbox centrowanie rzeczy w CSS przypominało przekonywanie kota, żeby wykonywał polecenia.

Możliwe?

Może.

Przyjemne?

Nie.

Stwórz Projekt

Stwórz folder dla tej lekcji:

mkdir css-lesson5
cd css-lesson5
touch index.html
touch style.css

Powinieneś mieć:

css-lesson5/
  index.html
  style.css

Otwórz folder w swoim edytorze.

Zbudujemy małą landing page z nawigacją i cards.

To dobre ćwiczenie z Flexbox.

Proste.

Praktyczne.

Nie tajemniczy labirynt CSS.

Przynajmniej nie dzisiaj.

Napisz HTML

Otwórz index.html i dodaj to:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Layout z Flexbox</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <nav class="navbar">
      <h1 class="logo">FlexSite</h1>

      <div class="nav-links">
        <a href="#">Home</a>
        <a href="#">Kursy</a>
        <a href="#">Projekty</a>
        <a href="#">Kontakt</a>
      </div>
    </nav>

    <section class="hero">
      <div class="hero-text">
        <h2>Naucz Się Flexbox Bez Paniki</h2>
        <p>Flexbox pomaga wyrównywać i organizować elementy z mniejszym chaosem i mniejszą liczbą dramatycznych westchnień.</p>
        <a href="#" class="button">Zacznij Naukę</a>
      </div>

      <div class="hero-box">
        <p>display: flex;</p>
      </div>
    </section>
  </header>

  <main class="page">
    <section class="cards">
      <article class="card">
        <h2>Wyrównuj</h2>
        <p>Ustawiaj elementy dokładnie tam, gdzie chcesz.</p>
      </article>

      <article class="card">
        <h2>Rozdzielaj</h2>
        <p>Kontroluj przestrzeń między elementami.</p>
      </article>

      <article class="card">
        <h2>Organizuj</h2>
        <p>Twórz czyste rzędy i kolumny.</p>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <p>Stworzone podczas nauki CSS Flexbox.</p>
  </footer>
</body>
</html>

Ta strona ma:

Idealnie do ćwiczenia Flexbox.

Teraz musimy sprawić, żeby layout zachowywał się poprawnie.

Grzecznie, jeśli to możliwe.

Zacznij od Podstawowych Stylów

Otwórz style.css i dodaj:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

To daje nam:

Dobra podstawa.

Zła podstawa sprawia, że layout boli.

Jak budowanie strony na mokrym spaghetti.

Stwórz Flex Container

Aby użyć Flexbox, dodajesz:

display: flex;

do containera.

Przykład:

.navbar {
  display: flex;
}

Container staje się flex container.

Bezpośrednie dzieci w środku stają się flex items.

W tym przypadku:

<nav class="navbar">
  <h1 class="logo">FlexSite</h1>
  <div class="nav-links">...</div>
</nav>

.navbar jest flex container.

.logo i .nav-links są flex items.

Dodaj to:

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

Teraz logo i linki są w jednej linii.

Logo idzie w lewo.

Linki idą w prawo.

Flexbox już robi użyteczną robotę.

Podejrzanie użyteczną.

Ale akceptujemy.

Flex Direction

Property flex-direction kontroluje główny kierunek.

Domyślna wartość:

flex-direction: row;

To znaczy, że elementy idą od lewej do prawej.

Możesz też użyć:

flex-direction: column;

To znaczy, że elementy idą z góry na dół.

Przykład:

.hero {
  display: flex;
  flex-direction: row;
}

To ustawia dzieci hero obok siebie.

Dodaj to:

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px;
}

Teraz tekst hero i hero box stoją obok siebie.

Dużo lepiej niż dwa smutne bloki ułożone bez planu.

justify-content

justify-content kontroluje wyrównanie na głównej osi.

Jeśli flex-direction to row, główna oś jest pozioma.

Popularne wartości:

justify-content: flex-start;
justify-content: center;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

W navbar użyliśmy:

justify-content: space-between;

To odsuwa elementy od siebie.

Logo w lewo.

Linki w prawo.

Jak dobra navigation bar, która zna swoją pracę.

W hero też użyliśmy:

justify-content: space-between;

To tworzy przestrzeń między tekstem i pudełkiem.

Flexbox praktycznie układa meble.

Wreszcie ktoś w CSS zachowuje się jak dorosły.

align-items

align-items kontroluje wyrównanie na osi poprzecznej.

Jeśli flex-direction to row, oś poprzeczna jest pionowa.

Popularne wartości:

align-items: flex-start;
align-items: center;
align-items: flex-end;
align-items: stretch;

Użyliśmy:

align-items: center;

To centruje elementy pionowo.

Bardzo użyteczne.

Bardzo częste.

Bardzo satysfakcjonujące.

Centrowanie rzeczy kiedyś było horrorem CSS.

Flexbox sprawił, że stało się dużo mniej dramatyczne.

Nie całkiem bez dramatu.

Ale mniej dramatyczne.

gap

Property gap tworzy przestrzeń między flex items.

Przykład:

.nav-links {
  display: flex;
  gap: 20px;
}

Dodaj to:

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

Teraz linki nawigacyjne mają czyste odstępy.

Nie trzeba dodawać margin do każdego linku.

Nie ma małych bitew o spacing.

Nie ma problemu “dlaczego ostatni element jest dziwny?”.

gap jest piękny.

CSS czasem daje nam prezenty.

Rzadko, ale naprawdę.

Wystylizuj Header i Hero

Dodaj te style:

.site-header {
  background-color: #111827;
  color: white;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.hero-text {
  max-width: 560px;
}

.hero-text h2 {
  font-size: 48px;
  margin: 0 0 16px;
}

.hero-text p {
  color: #d1d5db;
  font-size: 20px;
  line-height: 1.7;
}

.button {
  display: inline-block;
  background-color: #2563eb;
  color: white;
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
}

Teraz hero wygląda bardziej jak prawdziwa sekcja.

Przycisk jest zaokrąglony.

Tekst jest czytelny.

Layout jest uporządkowany.

Nikt nie płacze.

Świetny postęp.

Centrowanie z Flexbox

Flexbox jest znany z centrowania.

Aby wyśrodkować coś poziomo i pionowo:

.hero-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

Dodaj to:

.hero-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  min-height: 180px;
  background-color: #1f2937;
  border: 2px solid #374151;
  border-radius: 24px;
  font-size: 22px;
  font-weight: 700;
}

Teraz tekst w .hero-box jest idealnie wyśrodkowany.

To jeden z najbardziej użytecznych wzorców Flexbox.

Mały cud.

Bez starożytnego rytuału.

Bez świec CSS.

Bez składania klawiatury w ofierze.

Cards z Flexbox

Teraz wystylizuj sekcję cards.

Dodaj:

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.cards {
  display: flex;
  gap: 24px;
}

.card {
  flex: 1;
  background-color: white;
  padding: 28px;
  border-radius: 18px;
  border: 2px solid #e5e7eb;
}

.card h2 {
  margin-top: 0;
}

.card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.6;
}

Ważna część:

.card {
  flex: 1;
}

To mówi każdej card, żeby zajęła równą część dostępnej przestrzeni.

Trzy cards.

Ta sama szerokość.

Czysty layout.

Bez ręcznego liczenia.

CSS robi matematykę.

Spróbuj nie wyglądać na zbyt zaskoczonego.

Property flex

Property flex kontroluje, jak flex items rosną lub się kurczą.

To:

flex: 1;

oznacza:

Pozwól temu elementowi rosnąć i dzielić dostępną przestrzeń równo.

Jeśli wszystkie cards mają flex: 1, stają się równej szerokości.

Przykład:

.card {
  flex: 1;
}

To bardzo użyteczne dla cards, kolumn i sekcji.

Ale nie używaj flex: 1 wszędzie bez myślenia.

Narzędzia CSS są potężne.

Młotek jest użyteczny.

Ale nie myjesz nim zębów.

Footer

Dodaj:

.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: #6b7280;
}

Prosty footer.

Bez dramatu.

Czasem to najlepszy rodzaj footera.

Pełny CSS

Twój style.css powinien wyglądać tak:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  background-color: #111827;
  color: white;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px;
}

.hero-text {
  max-width: 560px;
}

.hero-text h2 {
  font-size: 48px;
  margin: 0 0 16px;
}

.hero-text p {
  color: #d1d5db;
  font-size: 20px;
  line-height: 1.7;
}

.button {
  display: inline-block;
  background-color: #2563eb;
  color: white;
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
}

.hero-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  min-height: 180px;
  background-color: #1f2937;
  border: 2px solid #374151;
  border-radius: 24px;
  font-size: 22px;
  font-weight: 700;
}

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.cards {
  display: flex;
  gap: 24px;
}

.card {
  flex: 1;
  background-color: white;
  padding: 28px;
  border-radius: 18px;
  border: 2px solid #e5e7eb;
}

.card h2 {
  margin-top: 0;
}

.card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.6;
}

.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: #6b7280;
}

Zapisz.

Odśwież.

Strona powinna teraz mieć:

To Flexbox robi swoją robotę.

Cicho potężny.

Jak developer, który naprawił production i się nie chwalił.

Rzadkie stworzenie.

Częste Błędy

Dodanie display flex do złego elementu

Flexbox działa na bezpośrednie dzieci.

Jeśli napiszesz:

.card {
  display: flex;
}

to wpływa na dzieci wewnątrz .card.

Nie organizuje samych cards.

Aby zorganizować cards, dodaj Flexbox do ich parent:

.cards {
  display: flex;
}

Parent kontroluje dzieci.

To zdanie wyjaśnia połowę Flexbox.

I może trochę psychologii rodzinnej.

Zapomnienie gap

Bez gap elementy mogą się dotykać.

Źle:

.cards {
  display: flex;
}

Lepiej:

.cards {
  display: flex;
  gap: 24px;
}

Spacing ma znaczenie.

Bez odstępów layout wygląda tłoczno.

Jakby wszyscy przyszli na tę samą imprezę i stanęli w kuchni.

Używanie Flexbox do wszystkiego

Flexbox jest świetny dla layoutów jednowymiarowych.

Rows albo columns.

Ale dla pełnych dwuwymiarowych layoutów CSS Grid często jest lepszy.

Flexbox nie jest zły.

Po prostu nie jest odpowiedzią na każde pytanie.

Nie używaj śrubokręta do jedzenia zupy.

Praktyka

Stwórz stronę z:

Użyj Flexbox dla:

Użyj tych properties:

Zmieniaj wartości i obserwuj, co się dzieje.

CSS staje się zrozumiały, gdy eksperymentujesz.

Nie wtedy, gdy patrzysz na niego, jakby był ci winien pieniądze.

Mini Wyzwanie

Stwórz sekcję pricing z trzema planami:

Każdy plan powinien być card.

Użyj Flexbox, żeby cards stały w jednym rzędzie.

Daj każdej card równą szerokość przez:

flex: 1;

Wyróżnij Premium card.

Dodaj button wewnątrz każdej card.

Potem wyśrodkuj obszar button za pomocą Flexbox.

To prawdziwy Flexbox z życia.

Cards.

Buttons.

Spacing.

Alignment.

Codzienny chleb frontend development.

Czasem chrupiący.

Ale użyteczny.

Podsumowanie

Dzisiaj nauczyłeś się, że:

Flexbox jest jednym z najważniejszych narzędzi CSS.

Naucz się go dobrze.

Używaj często.

Ale nie używaj go absolutnie do wszystkiego.

Nawet pizza nie powinna być jedzona młotkiem.

Następna Lekcja

W następnej lekcji poznamy CSS Grid.

Flexbox jest świetny dla jednego kierunku.

Grid jest potężny dla rows i columns razem.

Królestwo layoutów się rozszerza.