CodeGym/Kursy/Frontend SELF PL/Flexbox i responsywność

Flexbox i responsywność

Dostępny

10.1 Responsywne kolumny

Flexbox jest przeznaczony do jednokierunkowych kompozycji, co oznacza, że idealnie nadaje się do układania elementów w wierszu lub kolumnie. Przyjrzyjmy się podstawom Flexboxa oraz technikom tworzenia złożonych i responsywnych układów.

Flex-kontener i Flex-elementy

  • Flex-kontener: element, do którego stosowana jest właściwość display: flex. Ten kontener zarządza rozkładem wszystkich elementów potomnych (flex-elementów)
  • Flex-elementy: elementy potomne flex-kontenera

1. Tworzenie responsywnych kolumn

Przykład tworzenia responsywnych kolumn z użyciem flex-wrap, flex-grow, flex-shrink i flex-basis:

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

.flex-item {
  flex: 1 1 200px;
  background-color: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
}
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsywne kolumny z Flexbox</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item">Kolumna 1</div>
      <div class="flex-item">Kolumna 2</div>
      <div class="flex-item">Kolumna 3</div>
    </div>
  </body>
</html>

Wyjaśnienie kodu:

  • .flex-container: definiuje kontener jako flex-kontener z elementami, które mogą być przenoszone do następnego wiersza, gdy brakuje miejsca (flex-wrap: wrap)
  • .flex-item: elementy mają równe rozmiary i mogą dostosowywać się do dostępnej przestrzeni (flex: 1 1 200px)

10.2 Responsywna galeria obrazów

Stworzymy responsywną galerię obrazów, która zmienia liczbę kolumn w zależności od rozmiaru ekranu:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Flexbox Gallery</title>
    <style>
      .gallery {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .gallery img {
        flex: 1 1 calc(33.333% - 10px);
        max-width: calc(33.333% - 10px);
        height: auto;
      }

      @media (max-width: 768px) {
        .gallery img {
          flex: 1 1 calc(50% - 10px);
          max-width: calc(50% - 10px);
        }
      }

      @media (max-width: 480px) {
        .gallery img {
          flex: 1 1 100%;
          max-width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <div class="gallery">
      <img data-max-width="256" data-id="ebb06cf3-0e04-45bd-a33e-31fe096fd323" src="https://cdn.javarush.com/images/article/ebb06cf3-0e04-45bd-a33e-31fe096fd323/256.jpeg" alt="image 1">
      <img data-max-width="256" data-id="ddbb4085-7a58-44e0-88fe-a2368b777222" src="https://cdn.javarush.com/images/article/ddbb4085-7a58-44e0-88fe-a2368b777222/256.jpeg" alt="image 2">
      <img data-max-width="256" data-id="71be962a-10e9-4351-8c27-8846c6ad2e00" src="https://cdn.javarush.com/images/article/71be962a-10e9-4351-8c27-8846c6ad2e00/256.jpeg" alt="image 3">
      <img data-max-width="256" data-id="8afd6be8-0f8e-42e9-a64b-8549f12862f7" src="https://cdn.javarush.com/images/article/8afd6be8-0f8e-42e9-a64b-8549f12862f7/256.jpeg" alt="image 4">
      <img data-max-width="256" data-id="77241dcb-9b7f-471e-934e-9f7f2a42d369" src="https://cdn.javarush.com/images/article/77241dcb-9b7f-471e-934e-9f7f2a42d369/256.jpeg" alt="image 5">
    </div>
  </body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Flexbox Gallery</title>
    <style>
      .gallery {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .gallery img {
        flex: 1 1 calc(33.333% - 10px);
        max-width: calc(33.333% - 10px);
        height: auto;
      }

      @media (max-width: 768px) {
        .gallery img {
          flex: 1 1 calc(50% - 10px);
          max-width: calc(50% - 10px);
        }
      }

      @media (max-width: 480px) {
        .gallery img {
          flex: 1 1 100%;
          max-width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <div class="gallery">
      <img src="image1.jpg" alt="Image 1">
      <img src="image2.jpg" alt="Image 2">
      <img src="image3.jpg" alt="Image 3">
      <img src="image4.jpg" alt="Image 4">
      <img src="image5.jpg" alt="Image 5">
    </div>
  </body>
</html>

Wyjaśnienie:

  • Na dużych ekranach obrazy zajmują jedną trzecią szerokości kontenera
  • Na ekranach o szerokości do 768 pikseli obrazy zajmują połowę szerokości kontenera
  • Na ekranach o szerokości do 480 pikseli obrazy zajmują pełną szerokość kontenera

10.3 Złożony responsywny układ z Flexbox

Stworzymy złożony układ z użyciem Flexbox, który obejmuje nagłówek, panel boczny, główną zawartość i stopkę, dostosowujący się do różnych rozmiarów ekranów:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Complex Flexbox Layout</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin: 0;
      }

      header, footer {
        background-color: #333;
        color: white;
        text-align: center;
        padding: 20px;
      }

      main {
        flex: 1;
        display: flex;
        flex-direction: column;
      }

      .content {
        flex: 1;
        padding: 20px;
        background-color: #f4f4f4;
      }

      aside {
        background-color: #ccc;
        padding: 20px;
      }

      @media (min-width: 768px) {
        main {
          flex-direction: row;
        }

        .content {
          flex: 3;
        }

        aside {
          flex: 1;
        }
      }
    </style>
  </head>
  <body>
    <header>Header</header>
    <main>
      <aside>Panel boczny</aside>
      <div class="content">Główna zawartość</div>
    </main>
    <footer>Stopka</footer>
  </body>
</html>

Wyjaśnienie:

  • Na małych ekranach układ składa się z nagłówka, głównej zawartości, panelu bocznego i stopki, ułożonych pionowo
  • Na ekranach o szerokości 768 pikseli i większej główna zawartość i panel boczny są ułożone poziomo
1
Zadanie
Frontend SELF PL,  poziom 26lekcja 4
Niedostępne
Responsywne kolumny
Responsywne kolumny
1
Zadanie
Frontend SELF PL,  poziom 26lekcja 4
Niedostępne
Galeria Responsywna
Galeria Responsywna
Komentarze
  • Popularne
  • Najnowsze
  • Najstarsze
Musisz się zalogować, aby dodać komentarz
Ta strona nie ma jeszcze żadnych komentarzy