Введение
В этом практическом занятии участники изучат свойство flex-grow в CSS Flexbox, мощной технике макетирования для создания отзывчивых и гибких веб-дизайнов. С помощью последовательного подхода ученики создадут HTML-файл, создадут контейнер flexbox и проведут эксперименты с разными значениями flex-grow, чтобы понять, как элементы динамически расширяются и распределяют доступное пространство.
Практическое занятие guides студентов по созданию базовой HTML-структуры, определению контейнера flexbox и применению свойств flex-grow к дочерним элементам. Задав числовые значения и наблюдая, как боксы пропорционально растут, участники получат практические навыки в управлении гибкостью макета и в понимании тонких аспектов поведения flex-grow в веб-дизайне.
Создайте HTML-файл и настройте базовую структуру
В этом шаге вы создадите основополагающий HTML-файл для изучения свойства flex-grow в CSS Flexbox. Мы настроим базовую HTML-структуру и подготовим окружение для демонстрации flexbox.
Во - первых, перейдите в каталог проекта и создайте HTML-файл:
cd ~/project
touch index.html
Теперь откройте файл index.html в WebIDE и добавьте следующую HTML-структуру:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Flexbox flex-grow Demonstration</title>
<style>
/* CSS стили будут добавлены в последующих шагах */
</style>
</head>
<body>
<div class="container">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>
</body>
</html>
Такая базовая HTML-структура включает в себя:
- Контейнер
<div>, который станет нашим контейнером flexbox - Три дочерних элемента
<div>, представляющие боксы, которые мы будем использовать для демонстрации flex-grow - Плейсхолдер
<style>, где мы добавим CSS в последующих шагах
Пример вывода при просмотре файла:
[HTML-файл создан с базовой структурой и тремя div-боксами]
Теперь файл готов для дальнейшего изучения CSS Flexbox в следующих шагах.
Определите контейнер Flexbox с свойством flex-grow
В этом шаге вы узнаете, как определить контейнер flexbox и понять основную концепцию свойства flex-grow. Откройте файл index.html в WebIDE и измените секцию <style>, чтобы создать контейнер flexbox.
Добавьте следующий CSS, чтобы определить контейнер flexbox:
<style>
.container {
display: flex;
border: 2px solid #333;
width: 100%;
height: 200px;
}
.box {
background-color: #4caf50;
color: white;
padding: 20px;
margin: 10px;
text-align: center;
}
</style>
Рассмотрим CSS подробнее:
display: flex;превращает контейнер в контейнер flexwidth: 100%;делает контейнер равным по ширине- Стили
.boxопределяют внешний вид отдельных элементов flex
Пример вывода при просмотре в браузере:
[Три зеленых бокса отображаются в горизонтальной строке, заполняя контейнер]
Свойство flex-grow определяет, как элементы flex растут относительно друг друга, когда есть дополнительное пространство. По умолчанию flex-grow установлен в 0, что означает, что элементы не будут увеличиваться за пределы своего исходного размера.
Чтобы увидеть стандартное поведение, откройте HTML-файл в веб-браузере. Вы заметите, что боксы сохраняют свой исходный размер и не расширяются, чтобы заполнить контейнер.
Изучите начальные и наследуемые значения flex-grow
В этом шаге вы изучите стандартное и наследуемое поведение свойства flex-grow. Откройте файл index.html и обновите секцию <style>, чтобы изучить эти концепции.
Во - первых, давайте разберем начальное значение flex-grow:
<style>
.container {
display: flex;
border: 2px solid #333;
width: 100%;
height: 200px;
}
.box {
background-color: #4caf50;
color: white;
padding: 20px;
margin: 10px;
text-align: center;
/* По умолчанию начальное значение flex-grow равно 0 */
/* flex-grow: 0; */
}
.box1 {
/* Явное установление начального значения */
flex-grow: 0;
}
.box2 {
/* Демонстрация наследования */
flex-grow: inherit;
}
.box3 {
/* Другой способ показать начальное состояние */
flex-grow: initial;
}
</style>
Основные наблюдения:
flex-grow: 0;- это значение по умолчанию, что означает, что элементы не будут растиinheritнаследует значениеflex-growот родительского контейнераinitialсбрасывает свойство до его значения по умолчанию (0)
Пример вывода при просмотре в браузере:
[Три зеленых бокса одинаковой ширины, не расширяются, чтобы заполнить контейнер]
Для дальнейшего иллюстрации вы можете изменить HTML, чтобы показать, как эти значения работают:
<body>
<div class="container">
<div class="box box1">Box 1 (flex-grow: 0)</div>
<div class="box box2">Box 2 (flex-grow: inherit)</div>
<div class="box box3">Box 3 (flex-grow: initial)</div>
</div>
</body>
Этот пример показывает, что по умолчанию элементы flex сохраняют свой исходный размер и не растут, чтобы заполнить дополнительное пространство в контейнере.
Назначьте числовые значения flex-grow для различных элементов
В этом шаге вы узнаете, как использовать числовые значения с flex-grow, чтобы контролировать, как элементы flex расширяются внутри контейнера. Откройте файл index.html и обновите секцию <style>, чтобы изучить разные числовые значения flex-grow.
Обновите CSS следующими стилями:
<style>
.container {
display: flex;
border: 2px solid #333;
width: 100%;
height: 200px;
}
.box {
background-color: #4caf50;
color: white;
padding: 20px;
margin: 10px;
text-align: center;
}
.box1 {
/* Box 1 будет расти на 1 единицу */
flex-grow: 1;
}
.box2 {
/* Box 2 будет расти на 2 единицы */
flex-grow: 2;
}
.box3 {
/* Box 3 будет расти на 3 единицы */
flex-grow: 3;
}
</style>
Обновите HTML, чтобы соответствовать новым стилям:
<body>
<div class="container">
<div class="box box1">Box 1 (flex-grow: 1)</div>
<div class="box box2">Box 2 (flex-grow: 2)</div>
<div class="box box3">Box 3 (flex-grow: 3)</div>
</div>
</body>
Основные наблюдения:
- Значения
flex-growопределяют, как распределяется дополнительное пространство - Более высокие значения означают большее растение по сравнению с другими элементами
- Общее доступное пространство делится пропорционально
Пример вывода при просмотре в браузере:
[Три зеленых бокса с разной шириной:
- Box 1 самая узкая (1 единица)
- Box 2 шире (2 единицы)
- Box 3 самая широкая (3 единицы)]
Теперь боксы будут расширяться по-разному в зависимости от их значений flex-grow, демонстрируя, как можно контролировать размер элементов в контейнере flex.
Проверьте пропорции flex-grow
В этом шаге вы изучите более сложные пропорции flex-grow и поймете, как разные значения взаимодействуют внутри контейнера flex. Обновите файл index.html следующим кодом:
<style>
.container {
display: flex;
border: 2px solid #333;
width: 100%;
height: 200px;
background-color: #f0f0f0;
}
.box {
color: white;
padding: 20px;
margin: 10px;
text-align: center;
}
.box1 {
background-color: #3498db;
flex-grow: 1;
}
.box2 {
background-color: #e74c3c;
flex-grow: 2;
}
.box3 {
background-color: #2ecc71;
flex-grow: 1;
}
.box4 {
background-color: #f39c12;
flex-grow: 4;
}
</style>
<body>
<div class="container">
<div class="box box1">Box 1 (flex-grow: 1)</div>
<div class="box box2">Box 2 (flex-grow: 2)</div>
<div class="box box3">Box 3 (flex-grow: 1)</div>
<div class="box box4">Box 4 (flex-grow: 4)</div>
</div>
</body>
Основные концепции для понимания:
- Общие значения flex-grow: 1 + 2 + 1 + 4 = 8
- Box 1 и Box 3 получают по 1/8 дополнительного пространства каждый
- Box 2 получает 2/8 дополнительного пространства
- Box 4 получает 4/8 (половина) дополнительного пространства
Пример вывода при просмотре в браузере:
[Четыре цветных бокса с разной шириной:
- Box 1 и Box 3: Узкие (по 1/8 каждый)
- Box 2: Немного шире (2/8)
- Box 4: Самая широкая (4/8 или половина контейнера)]
Этот пример демонстрирует, как значения flex-grow создают пропорциональные размеры, позволяя точно контролировать расширение элементов.
Резюме
В этом практическом занятии участники исследуют свойство flex-grow в CSS Flexbox, создавая структурированный HTML-файл и реализуя гибкий контейнер с несколькими элементами div. Практическое занятие начинается с настройки базовой HTML-структуры с контейнером и тремя дочерними боксами, демонстрируя основную настройку для экспериментов с flexbox.
С помощью последовательного стилизации CSS ученики узнают, как превратить стандартный контейнер в макет flexbox, применяя свойство flex-grow, чтобы понять, как элементы динамически расширяются и распределяют доступное пространство. Практический подход позволяет участникам экспериментировать с разными значениями flex-grow, наблюдая, как числовые пропорции влияют на размер и распределение элементов контейнера flex.
