Адаптивний дизайн сторінки за допомогою Flexbox

Практичне заняття: Створення адаптивного дизайну сторінки за допомогою Flexbox.

Flexbox - це потужний інструмент для створення різноманітних макетів і організації розміщення елементів на веб-сторінці. Він дозволяє легко налаштувати розміщення елементів на основі їх контейнера та змінювати це розміщення відповідно до розміру екрану.

Сьогодні на практичних прикладах ми розглянемо код, який містить семантичні елементи і розміщує їх у правильній послідовності, код CSS стилізації сторінки з використанням Flexbox, приклад об'єднання коду HTML та CSS для стилізації сторінки, та приклад застосування медіа запитів.

За допомогою Flexbox можна:

Легко вирівнювати елементи горизонтально та вертикально
Розміщувати елементи в рядки і колонки
Міняти розмір елементів на основі розміру екрану
Створювати адаптивні макети, що підлаштовуються під будь-який розмір екрану

Отже, Flexbox - це чудовий вибір для створення адаптивного дизайну сторінки, який дозволить вам легко налаштувати розміщення елементів на основі їх контейнера та змінювати це розміщення відповідно до розміру екрану.

План створення адаптивного дизайну сторінки за допомогою Flexbox:

Давайте розглянемо кілька кроків, які можна використовувати для створення адаптивного дизайну сторінки за допомогою Flexbox:

Планування макету: визначте, які елементи повинні бути на сторінці і як вони повинні розміщуватися. Розгляньте різні макети для різних розмірів екрану.
Створення HTML-структури: створіть HTML-структуру для всіх елементів на сторінці. Візуалізуйте, як вони повинні розміщуватися на основі планування макету.
Створення CSS-стилів: застосуйте CSS-стилі для кожного елемента на сторінці, використовуючи Flexbox, щоб організувати розміщення елементів. Використовуйте медіа-запити, щоб змінювати ці стилі відповідно до розміру екрану.
Тестування та налагодження: перевірте сторінку на різних пристроях та розмірах екрану, щоб переконатися, що вона добре відображається та виглядає на всіх пристроях.

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

Згідно першого пункту нашого плану, давайте визначимося, які семантичні теги ми використаємо для нашої сторінки.

Наша майбутня сторінка міститиме семантичні елементи header, nav, main, section, article, figure, footer, address. Наша задача різмістити їх у правильній послідовності.

Приклад коду, який містить семантичні елементи і розміщує їх у правильній послідовності:

<!DOCTYPE html>
<html>
  <head>
    <title>Сторінка з семантичними елементами</title>
  </head>
  <body>
    <header>
      <h1>Заголовок</h1>
      <nav>
        <ul>
          <li><a href="#">Посилання 1</a></li>
          <li><a href="#">Посилання 2</a></li>
          <li><a href="#">Посилання 3</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section>
        <h2>Секція 1</h2>
        <p>Текст секції 1.</p>
      </section>
      <section>
        <h2>Секція 2</h2>
        <article>
          <h3>Стаття 1</h3>
          <figure>
            <img src="image1.jpg" alt="Зображення 1">
            <figcaption>Підпис до зображення 1</figcaption>
          </figure>
          <p>Текст статті 1.</p>
        </article>
        <article>
          <h3>Стаття 2</h3>
          <figure>
            <img src="image2.jpg" alt="Зображення 2">
            <figcaption>Підпис до зображення 2</figcaption>
          </figure>
          <p>Текст статті 2.</p>
        </article>
      </section>
    </main>
    <footer>
      <address>
        Адреса: Вулиця, місто, область, країна, поштовий індекс<br>
        Телефон: +380123456789<br>
        Електронна пошта: example@email.com
      </address>
    </footer>
  </body>
</html>

У цьому прикладі ми використали <header>, <nav>, <main>, <section>, <article>, <figure>, <footer> та <address> для створення семантичного коду та відповідно розмістили їх у правильній послідовності для створення логічної структури сторінки.

Приклад не містить css селкторів для стилізації сторінки.

Пояснення вкладених семантичних елементів, які формують структуру сторінки.

Загальна структура цього коду містить ряд вкладених елементів, що дозволяє описати структуру сторінки. Основні елементи цієї структури такі:

<!DOCTYPE html> - директива, що вказує браузеру на тип документу. В даному випадку це HTML.
<html> - кореневий елемент HTML-документа. Всі елементи між <html> та </html> складають зміст сторінки.
<head> - елемент, що містить заголовки документа, такі як <title> або <meta>.
<title> - елемент, що містить заголовок сторінки.
<body> - елемент, що містить зміст сторінки.
<header> - елемент, що містить заголовок сторінки. Містить <h1> та <nav>.
<h1> - елемент, що містить заголовок сторінки.
<nav> - елемент, що містить навігаційне меню. Містить <ul> та <li>.
<ul> - елемент, що містить список навігаційних посилань. Містить <li>.
<li> - елемент, що містить окреме навігаційне посилання.
<main> - елемент, що містить основний вміст сторінки. Містить дві <section>.
<section> - елемент, що містить певний вміст на сторінці. Містить <h2> та <article>.
<h2> - елемент, що містить заголовок секції.
<article> - елемент, що містить окрему статтю. Містить <h3>, <figure> та <p>.
<h3> - елемент, що містить заголовок статті.
<figure> - елемент, що містить зображення та підпис до нього. Містить <img> та <figcaption>.
<img> - елемент, що містить зображення.
<figcaption> - елемент, що містить підпис до зображення.
<p> - елемент, що містить текст статті.
<footer> - елемент, що містить інформацію про автора сторінки та його адресу.
<address> - елемент, що містить контактну інформацію автора сторінки, таку як адреса або електронна пошта.

Загальна структура цього коду є семантичною, тобто відображає логічну структуру сторінки, що допомагає не тільки розробнику, але і користувачеві зрозуміти, як сторінка організована. Наприклад, <nav> вказує на те, що це навігаційне меню, а <article> - на те, що це окрема стаття. Крім того, використання семантичних елементів також підвищує доступність сторінки для користувачів з особливими потребами.

Приклад CSS-стилів для сторінки з використанням Flexbox:

<!DOCTYPE html>
<html>
<head>
 <style>
/* Стилі для body */
body {display: flex;/* Розміщуємо всі елементи в ряд */
  flex-direction: column;/* Встановлюємо напрямок осей контейнера на вертикальний */
  min-height: 100vh;/* Забезпечуємо мінімальну висоту контейнера, щоб футер завжди був внизу */
  margin: 0;
  font-family: Arial, sans-serif;
}
/* Стилі для header */
header {display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #333;
  color: #fff;
}
/* Стилі для nav */
nav {display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ddd;
  padding: 0.5rem;
}
/* Стилі для nav > ul */
nav > ul {display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Стилі для nav > ul > li */
nav > ul > li {margin: 0 1rem;}
/* Стилі для main */
main {display: flex;
  flex-wrap: wrap;
  padding: 1rem;}
/* Стилі для section */
section {flex-basis: 100%;}
/* Стилі для article */
article {
  flex-basis: calc(50% - 2rem);
  margin: 1rem;
  border: 1px solid #ddd;
  padding: 1rem;
}
/* Стилі для figure */
figure { margin: 0;}
/* Стилі для figure > img */
figure > img {max-width: 100%;height: auto;}
/* Стилі для footer */
footer {display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: #fff;
  padding: 1rem;
}
/* Стилі для address */
address {font-style: normal;}
  </style>
</head>
<body>
<p>Зразок CSS-стилів для сторінки з використанням Flexbox:</p>
</body>
</html>

У цьому коді ми використовуємо селектори елементів для кожного елементу на сторінці і додаємо стилі з використанням Flexbox для задання розміщення та відображення елементів на сторінці. Для кращого розуміння, ми додаємо коментарі до кожного рядка коду, які описують, які стилі застосовуються до кожного елементу.

Приклад об'єднання коду HTML та CSS для стилізації сторінки

<!DOCTYPE html>
<html>
  <head>
    <title>Сторінка з семантичними елементами</title>
 <style>
/* Стилі для body */
body {display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
}
/* Стилі для header */
header {display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #333;
  color: #fff;
}
/* Стилі для nav */
nav {display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ddd;
  padding: 0.5rem;
}
/* Стилі для nav > ul */
nav > ul {display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Стилі для nav > ul > li */
nav > ul > li {margin: 0 1rem;}
/* Стилі для main */
main {display: flex;
  flex-wrap: wrap;
  padding: 1rem;}
/* Стилі для section */
section {flex-basis: 100%;}
/* Стилі для article */
article {
  flex-basis: calc(50% - 2rem);
  margin: 1rem;
  border: 1px solid #ddd;
  padding: 1rem;
}
/* Стилі для figure */
figure { margin: 0;}
/* Стилі для figure > img */
figure > img {max-width: 100%;height: auto;}
/* Стилі для footer */
footer {display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: #fff;
  padding: 1rem;
}
/* Стилі для address */
address {font-style: normal;}
  </style>
  </head>
  <body>
    <header>
      <h1>Заголовок</h1>
      <nav>
        <ul>
          <li><a href="#">Посилання 1</a></li>
          <li><a href="#">Посилання 2</a></li>
          <li><a href="#">Посилання 3</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section>
        <h2>Секція 1</h2>
        <p>Текст секції 1.</p>
      </section>
      <section>
        <h2>Секція 2</h2>
        <article>
          <h3>Стаття 1</h3>
          <figure>
            <img src="image1.jpg" alt="Зображення 1">
            <figcaption>Підпис до зображення 1</figcaption>
          </figure>
          <p>Текст статті 1.</p>
        </article>
        <article>
          <h3>Стаття 2</h3>
          <figure>
            <img src="image2.jpg" alt="Зображення 2">
            <figcaption>Підпис до зображення 2</figcaption>
          </figure>
          <p>Текст статті 2.</p>
        </article>
      </section>
    </main>
    <footer>
      <address>
        Адреса: Вулиця, місто, область, країна, поштовий індекс<br>
        Телефон: +380123456789<br>
        Електронна пошта: example@email.com
      </address>
    </footer>
  </body>
</html>

У цьому коді ми об'єднали css селектори елементів з html кодом для стилізації нашої сторінки.

Пояснення медіазапитів.

Медіазапит є частиною CSS-стилю, що дозволяє змінювати стилізацію веб-сторінки в залежності від розміру екрана пристрою, на якому вона відображається.

Пояснення значення @media only screen and (min-width: 768px)

Цей CSS медіа-запит вибирає стилі, які будуть використовуватися тільки до екранів, ширина яких є більшою або рівною 768 пікселів.

Ключове слово only вказує, що цей медіа-запит буде використовуватися тільки до пристроїв, які підтримують ці умови. У цьому випадку це екрани моніторів.
screen означає, що медіа-запит буде використовуватися тільки до екранів, а не до друкарських аркушів або інших пристроїв.
min-width: 768px встановлює умови ширини екрана, при яких будуть використовуватися зазначені стилі. У цьому випадку будуть застосовані стилі, вказані в цьому середині медіа-запиту для пристроїв з мінімальною шириною 768 пікселів.

@media only screen and (max-width: 767px)

Цей CSS медіа-запит вибирає стилі, які будуть використовуватися тільки до екранів, ширина яких є меншою 768 пікселів.

У цьому випадку, стилі, що містяться всередині цього блоку, будуть застосовуватися лише на екранах з шириною до 767 пікселів. Це дозволяє забезпечити оптимальний дизайн та коректну роботу веб-сторінки на різних пристроях з різними розмірами екранів, зокрема на мобільних пристроях з меншими екранами.

Приклад використвння медіа-запитів, щоб змінювати стилі відповідно до розміру екрану.

<!DOCTYPE html>
<html>
  <head>
    <title>Сторінка з семантичними елементами</title>
    <style>
    /* Стилі для десктопів */

/* загальні стилі */
header {background-color: #333;
  color: #fff;padding: 1rem;}
nav {display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ddd;
  padding: 1rem;
}
  nav ul {
  display: flex; /* Розміщуємо всі елементи в ряд */
  justify-content: space-between;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  margin-right: 1rem;
}
 nav ul li:last-child {
  margin-right: 0;
}      
main {
  display: flex;flex-wrap: wrap;margin: 1rem;
}
section {flex: 1;margin: 1rem;}
article {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 1rem;
  margin-bottom: 1rem;
}
figure {margin: 0;}
footer {background-color: #333;color: #fff;padding: 1rem;}
address {font-style: italic;}
/* медіа-запит для десктопів */
@media only screen and (min-width: 768px)
{
  main {margin: 2rem;}
  section {margin: 0;}
  article {
    flex: 1;
    margin: 0 1rem 0 0;
  }
  figure {margin: 1rem;}
}
/* Стилі для мобільних пристроїв */

/* медіа-запит для мобільних пристроїв */
@media only screen and (max-width: 767px) {
  nav {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  article {margin: 0;}
}
    </style>
  </head>
  <body>
    <header>
      <h1>Заголовок</h1>
      <nav>
        <ul>
          <li><a href="#">Посилання 1</a></li>
          <li><a href="#">Посилання 2</a></li>
          <li><a href="#">Посилання 3</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section>
        <h2>Секція 1</h2>
        <p>Текст секції 1.</p>
      </section>
      <section>
        <h2>Секція 2</h2>
        <article>
          <h3>Стаття 1</h3>
          <figure>
            <img src="image1.jpg" alt="Зображення 1">
            <figcaption>Підпис до зображення 1</figcaption>
          </figure>
          <p>Текст статті 1.</p>
        </article>
        <article>
          <h3>Стаття 2</h3>
          <figure>
            <img src="image2.jpg" alt="Зображення 2">
            <figcaption>Підпис до зображення 2</figcaption>
          </figure>
          <p>Текст статті 2.</p>
        </article>
      </section>
    </main>
    <footer>
      <address>
        Адреса: Вулиця, місто, область, країна, поштовий індекс<br>
        Телефон: +380123456789<br>
        Електронна пошта: example@email.com
      </address>
    </footer>
  </body>
</html>

В цьому коді ми використовуємо медіа-запити, щоб змінювати розміщення і стилі елементів в залежності від розміру екрану. Наприклад, ми змінюємо властивості main і section при розмірі екрану більше 768px, і властивості nav та article при розмірі екрану менше 767px.

З повагою, Юрій Чернієвський! Керівник гуртка "WEB-Miditaur" науково – технічного напряму «WEB технології» ЦДЮТ Краснопільської селищної ради. Бакалавр, прикладна математика за спеціальним напрямом інформатика, Спеціаліст - інформатика, математик - програміст.

Цей твір ліцензовано на умовах Ліцензії Creative Commons Зазначення Авторства 4.0 Міжнародна.

Мої побажання

вихованцям

Будь допитливим, досліджуй глибини понять, адже лише це і допомагає розвиватися! На цьому сайті формується сприятливий простір для вивчення web. Рівень твого самостійного заглиблення в певні питання сьогодні будуть відповідати рівню твоєї компетенції з даного питання в майбутньому. Єдиним фактором, який має значення, є твоя власна здатність і бажання вчитися. Немає сенсу порівнювати свій прогрес з іншими, оскільки цей досвід здебільшого суб’єктивний. Поділіться посиланням у соціальних мережах за допомогою кнопок, розміщених нижче та підпишіться на блог, щоб першими отримувати нові публікації корисного навчального контенту! Коментуй публікацію, пиши свої враження, залишай питання в коментарях, якщо якісь моменти з публікації залишилися не зрозумілими!

🎓WEB-MIDITAUR

15 березня 2023 р.

Адаптивний дизайн сторінки за допомогою Flexbox

За допомогою Flexbox можна:

План створення адаптивного дизайну сторінки за допомогою Flexbox:

Приклад коду, який містить семантичні елементи і розміщує їх у правильній послідовності:

Пояснення вкладених семантичних елементів, які формують структуру сторінки.

Приклад CSS-стилів для сторінки з використанням Flexbox:

Приклад об'єднання коду HTML та CSS для стилізації сторінки

Пояснення медіазапитів.

Приклад використвння медіа-запитів, щоб змінювати стилі відповідно до розміру екрану.

Пов'язані статті:

0 Коментарів Підписатися на цей блог

Поділитися цим

Навчально-виховний простір

Теми

Загальна кількість переглядів сторінки

Підписники

🎓WEB-MIDITAUR

15 березня 2023 р.

Адаптивний дизайн сторінки за допомогою Flexbox

За допомогою Flexbox можна:

План створення адаптивного дизайну сторінки за допомогою Flexbox:

Приклад коду, який містить семантичні елементи і розміщує їх у правильній послідовності:

Пояснення вкладених семантичних елементів, які формують структуру сторінки.

Приклад CSS-стилів для сторінки з використанням Flexbox:

Приклад об'єднання коду HTML та CSS для стилізації сторінки

Пояснення медіазапитів.

Приклад використвння медіа-запитів, щоб змінювати стилі відповідно до розміру екрану.

Пов'язані статті:

0 Коментарів Підписатися на цей блог

Поділитися цим

Навчально-виховний простір

Теми

Загальна кількість переглядів сторінки

Підписники

15 березня 2023 р.