Лекції
Почати
Почати навчання
JavaRush /Курси /Frontend SELF UA /Відзивчиві сітки

Відзивчиві сітки

Frontend SELF UA
Рівень 25 , Лекція 2
Відкрита

3.1 Flexbox

Створення гнучких макетів з використанням Flexbox і Grid — це ключова техніка у розробці сучасних відзивчивих вебсайтів. Ці технології дозволяють легко управляти розташуванням елементів на сторінці, забезпечуючи їх адаптацію до різних розмірів екранів та пристроїв.

Flexbox (Flexible Box Layout Module) призначений для одномірного розміщення елементів (або по рядку, або по колонці). Flexbox спрощує створення гнучких і відзивчивих макетів.

Основні концепції Flexbox:

  • Flex-контейнер: елемент, до якого застосовується властивість display: flex
  • Flex-елементи: дочірні елементи flex-контейнера, які розташовуються всередині нього

Властивості Flexbox

Flex-контейнер:

  • display: flex: визначає елемент як flex-контейнер
  • flex-direction: встановлює напрямок розташування flex-елементів (row, column, row-reverse, column-reverse)
  • justify-content: керує вирівнюванням flex-елементів по головній осі (flex-start, flex-end, center, space-between, space-around)
  • align-items: керує вирівнюванням flex-елементів по поперечній осі (stretch, flex-start, flex-end, center, baseline)
Java-університет

Flex-елементи:

  • flex-grow: визначає здатність елемента збільшуватися при наявності вільного простору
  • flex-shrink: визначає здатність елемента зменшуватися при нестачі простору
  • flex-basis: задає початковий розмір елемента перед розподілом вільного простору
  • align-self: перевизначає вирівнювання елемента по поперечній осі, задане у align-items

Приклад використання Flexbox

Створимо макет із трьома колонками, який буде адаптуватися до різних розмірів екрану:

HTML 
    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Приклад Flexbox</title>
          <style>
            .flex-container {
              display: flex;
              justify-content: space-between;
              align-items: stretch;
              flex-wrap: wrap;
            }

            .flex-item {
              flex: 1 1 200px;
              margin: 10px;
              padding: 20px;
              background-color: #f4f4f4;
              text-align: center;
            }
          </style>
        </head>
        <body>
          <div class="flex-container">
            <div class="flex-item">Колонка 1</div>
            <div class="flex-item">Колонка 2</div>
            <div class="flex-item">Колонка 3</div>
          </div>
        </body>
      </html>

Пояснення коду:

  • .flex-container: визначає контейнер як flex-контейнер, вирівнює елементи з рівними проміжками між ними та дозволяє елементам переноситися на наступний рядок при нестачі простору
  • .flex-item: flex-елементи, які займають рівний простір, мають мінімальну ширину 200px та рівномірно розподілені всередині контейнера

3.2 CSS Grid

CSS Grid Layout — це двовимірна система компоновки, яка дозволяє створювати складні макети з використанням рядків і колонок.

Основні концепції CSS Grid:

  • Grid-контейнер: елемент, до якого застосовується властивість display: grid
  • Grid-елементи: дочірні елементи grid-контейнера, які розташовуються у сітці

Властивості CSS Grid

Grid-контейнер:

  • display: grid: визначає елемент як grid-контейнер
  • grid-template-columns: встановлює кількість і розміри колонок у сітці
  • grid-template-rows: встановлює кількість і розміри рядків у сітці
  • gap: керує проміжками між рядками і колонками
  • justify-items: керує горизонтальним вирівнюванням grid-елементів
  • align-items: керує вертикальним вирівнюванням grid-елементів

    Grid-елементи:

  • grid-column: визначає, на скільки колонок елемент буде простягатися
  • grid-row: визначає, на скільки рядків елемент буде простягатися
  • justify-self: перевизначає горизонтальне вирівнювання елемента
  • align-self: перевизначає вертикальне вирівнювання елемента

Приклад використання CSS Grid

Створимо макет із трьома колонками та двома рядками, який буде адаптуватися до різних розмірів екранів.

HTML 
    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Приклад CSS Grid</title>
          <style>
            .grid-container {
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              grid-template-rows: repeat(2, 1fr);
              gap: 10px;
            }

            .grid-item {
              padding: 20px;
              background-color: #e4e4e4;
              text-align: center;
            }
          </style>
        </head>
        <body>
          <div class="grid-container">
            <div class="grid-item">Елемент 1</div>
            <div class="grid-item">Елемент 2</div>
            <div class="grid-item">Елемент 3</div>
            <div class="grid-item">Елемент 4</div>
            <div class="grid-item">Елемент 5</div>
            <div class="grid-item">Елемент 6</div>
          </div>
        </body>
      </html>

Пояснення коду:

  • .grid-container: визначає контейнер як grid-контейнер із трьома колонками та двома рядками, кожен елемент займає рівний простір
  • .grid-item: grid-елементи з рівномірними відступами та фоном
Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ