Lesson3

Урок 3: Flexbox — Порядок на Странице, Как в Советском Дефицитном Магазине!

Введение

Привет, командир стилей! 🎩 Если твоя страница выглядит, как стихийный рынок, где каждый элемент толкается и кричит: “Купи слона!”, то пора навести порядок. И кто нам поможет? Конечно же, Flexbox!

Flexbox — это как строгий завхоз, который знает, где должен стоять каждый элемент и кто за что отвечает. С ним твои элементы будут стоять ровно, как солдаты на параде, не мешать друг другу и выглядеть безупречно. После этого урока ты сможешь выстроить их так, что они будут смотреться как полка с консервами в магазине “Березка”. Так что хватай чашку чая, и давай выстраивать строй!

Шаг 1: Запускаем и Хостим с Caddy (Всё По Режиму!)

Прежде чем начать выстраивать наших гостей в колонны, давай запустим проект при помощи Caddy. Открой терминал и перейди в папку с проектом:

cd ~/Documents/my-css-project

Теперь запускай Caddy:

caddy file-server --listen :8080

Твоя страничка теперь доступна по адресу http://localhost:8080. Пора ставить всех по местам!

Шаг 2: Устанавливаем Flexbox — Строевик на Твоей Странице

Чтобы начать использовать Flexbox, достаточно указать display: flex; на контейнере. Представь, что Flexbox — это строгий сержант, который ходит вдоль строя и проверяет, чтобы все стояли ровно.

Подготовка HTML:

Сначала подготовим “плац” (HTML) и поставим наших солдат (элементы):

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Учения</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="flex-container">
        <div class="box">Элемент 1</div>
        <div class="box">Элемент 2</div>
        <div class="box">Элемент 3</div>
        <div class="box">Элемент 4</div>
    </div>
</body>
</html>

А теперь объясним сержанту (Flexbox), как построить ряды в styles.css:

`styles.css`

body {
    font-family: Arial, sans-serif;
}

.flex-container {
    display: flex; /* Внимание, Flexbox вступает на плац! */
    justify-content: space-around; /* Разводим всех по местам. */
    padding: 10px;
}

.box {
    padding: 20px;
    margin: 10px;
    background-color: darkgreen;
    color: white;
    font-weight: bold;
}

Сохрани файл, обнови http://localhost:8080, и смотри: твои элементы стоят ровно, как солдаты перед командиром.

Шаг 3: Понимание Свойств Flexbox — Кто Тут Старший?

Flexbox предлагает целый арсенал свойств, чтобы держать строй. Вот основные:

justify-content: Определяет, как выстроить элементы по горизонтали. Это как решать, кто стоит в начале, а кто — в конце строя.
- justify-content: flex-start; — Все строятся с левой стороны, как очередь за молоком.
- justify-content: flex-end; — Все встали справа, как на кассе в гастрономе.
- justify-content: center; — Все столпились в центре, как у входа в “Гастроном №1”.
- justify-content: space-between; — Равномерно распределились по строю, как дисциплинированные туристы.
- justify-content: space-around; — Равное расстояние между всеми, как на танцплощадке.
align-items: Выровняем элементы по вертикали. Пусть твои элементы встают ровно или расслабляются, как гости на даче.
- align-items: flex-start; — Все тянутся вверх, как комсомольцы на первомайской демонстрации.
- align-items: center; — Все сидят посередине, как школьники на торжественной линейке.
- align-items: flex-end; — Все сползают вниз, как товарищи после субботника.

Шаг 4: Создание Рядов и Колонн — Партстроительство!

Ты также можешь менять направление своего Flexbox-макета с помощью flex-direction. Это свойство решает, будут ли твои элементы стоять в ряд или выстраиваться колоннами:

.flex-container {
    display: flex;
    flex-direction: row; /* По умолчанию — элементы стоят в ряд. */
}

.flex-container.kolonna {
    flex-direction: column; /* Теперь они стоят столбиком, как соседи на собрании жильцов. */
}

Попробуй!

Измени свой HTML, чтобы увидеть разницу:

<div class="flex-container kolonna">
    <div class="box">Элемент 1</div>
    <div class="box">Элемент 2</div>
    <div class="box">Элемент 3</div>
    <div class="box">Элемент 4</div>
</div>

Теперь элементы стоят в колонне, как на параде.

Шаг 5: Полный Строй — Организуем Настоящий Парад!

Давай соберём всё вместе в идеальный Flexbox-макет. Вот как должен выглядеть твой styles.css:

body {
    font-family: Arial, sans-serif;
}

.flex-container {
    display: flex;
    justify-content: center; /* Все в центре, как на митинге. */
    align-items: center; /* Ровненько, как на фотосессии в школьном альбоме. */
    flex-wrap: wrap; /* Элементы переходят на новый ряд, когда нужно. */
    gap: 15px; /* Оставляем место для манёвра. */
    border: 2px solid lightgrey;
    padding: 20px;
    background-color: #f9f9f9; /* Нейтральный фон, как на доске объявлений. */
}

.box {
    padding: 20px;
    background-color: lightblue;
    color: darkblue;
    font-weight: bold;
    text-align: center;
}

Теперь каждый элемент стоит как нужно, как первоклассники на линейке.

Заключение

Поздравляю, боец стилей! Теперь твои элементы знают, как выстраиваться в шеренгу и соблюдать дисциплину. Flexbox — это как строгий полковник CSS — заставляет всё стоять по струнке и не расслабляться.

В следующем уроке мы разберёмся с CSS Grid — настоящим стратегом макетов. Если Flexbox — это строй на плацу, то CSS Grid — это генеральный план парада на Красной площади!

До встречи на следующем уроке, где всё станет ещё интереснее! 😎