Modele układu: Box Model, Flexbox, Grid Layout

W CSS dostępne są trzy główne modele układu, które umożliwiają kontrolowanie rozmieszczenia elementów na stronie internetowej: Box Model, Flexbox oraz Grid Layout. Każdy z nich ma inne zastosowanie i oferuje różne możliwości w zakresie stylizacji układu stron.

Box Model

Box Model to podstawowy model układu w CSS, który definiuje, jak elementy są wyświetlane w odniesieniu do swoich obramowań i przestrzeni wokół nich.

Elementy Box Model:

• content (treść) - zawartość elementu
• padding (marginesy wewnętrzne) - przestrzeń między treścią a obramowaniem
• border (obramowanie) - linia wokół elementu
• margin (margines zewnętrzny) - przestrzeń na zewnątrz obramowania

.element {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  margin: 15px;
}

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Flexbox

Flexbox (Flexible Box Layout) to model układu, który pozwala na dynamiczne rozmieszczenie elementów w jednym wymiarze (pionowo lub poziomo). Flexbox zapewnia dużą elastyczność w układaniu elementów, a także automatyczne dostosowanie przestrzeni między nimi.

Główne właściwości:

• display: flex - definiuje kontener jako elastyczny
• flex-direction - ustawia kierunek osi układu (poziomo lub pionowo)
• justify-content - kontroluje wyrównanie wzdłuż osi głównej
• align-items - kontroluje wyrównanie wzdłuż osi poprzecznej

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Grid Layout

Grid Layout to model układu, który umożliwia tworzenie złożonych, wielokolumnowych i wielorzędowych układów. Jest bardziej zaawansowany niż Flexbox, ponieważ pozwala na zarządzanie zarówno w pionie, jak i w poziomie.

Główne właściwości:

• display: grid - definiuje kontener jako siatkę,
• grid-template-columns, grid-template-rows - ustalają liczbę i rozmiar kolumn oraz wierszy
• grid-gap - ustawia odstępy między komórkami siatki.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Podsumowanie

Box Model, Flexbox i Grid Layout to trzy kluczowe modele układu, które umożliwiają tworzenie efektywnych i elastycznych układów stron internetowych. Box Model skupia się na elementach pojedynczych i ich przestrzeniach, Flexbox świetnie sprawdza się w układach jednoliniowych, a Grid Layout jest idealnym rozwiązaniem do złożonych, wielokolumnowych układów.