Респонсивный сайт 'Дом для питомцев' с использованием Flexbox

Введение

В оживленном городе Петвилль Джордан, веб-разработчик, получил задачу по перепроектированию сайта "Дом для питомцев".

Этот лаба создает адаптивный и визуально привлекательный макет для владельцев питомцев. Сайт должен эффективно показывать услуги, информацию о нас и контактные данные на различных устройствах. Джордан решил использовать Flexbox из-за его мощных возможностей макетирования.

Основы Flexbox и свойство display

Для того чтобы начать работать с Flexbox, вам необходимо понять его основные концепции.

Представьте, что вы - интерьерный дизайнер, а ваша веб - страница - это большая, пустая комната. Ваша задача - сделать эту комнату уютной и эстетически привлекательной. Войдите в Flexbox, ваш волшебный палец, который поможет вам легко разместить мебель (то есть элементы веб - страницы). Будь это диван (главное содержимое) или кофейный столик (дополнительная информация), с помощью Flexbox вы можете убедиться, что все они находятся в идеальном положении.

Прежде чем мы углубимся в Flexbox, давайте быстро обсудим несколько фундаментальных концепций:

• Контейнер Flex: Представьте его как вашу комнату, где вы будете размещать различные элементы мебели.
• Элементы Flex: Это ваши элементы мебели, такие как диваны, стулья и кофейные столики.

Для начала использовать Flexbox, вы сначала должны объявить контейнер Flex. Это похоже на то, когда вы говорите: "Хорошо, давайте украсим эту комнату".

.container {
  display: flex;
}

После этого все прямые дочерние элементы класса .container становятся элементами Flex, следуя правилам макета Flexbox.

Свойство CSS display определяет, воспринимается ли элемент как блок или встрочный бокс, а также определяет макет для его дочерних элементов, такой как макет потока, сетка или Flex.

Мы можем использовать атрибут display, чтобы изменить способ размещения встрочных элементов, например:

display: block дает элементам свое собственное пространство, в то время как display: inline - block позволяет более гибко разместить элементы, позволяя элементам располагаться рядом друг с другом, но при этом по-прежнему контролировать их размеры.

Теперь, когда мы знаем, как использовать display, мы можем добавить следующее в style.css:

.navigation li {
  display: inline - block;
}
.navigation li a {
  text-decoration: none;
  color: black;
  padding: 10px;
  display: block;
}
form.form - content {
  display: block;
  padding: 0.8em 0;
}

Основная ось и поперечная ось

В области Flexbox два понятия至关重要：основная ось и поперечная ось. По умолчанию основная ось горизонтальна, а поперечная ось вертикальна, но это можно настроить с помощью свойства flex - direction.

• Горизонтальная основная ось: flex - direction: row; (по умолчанию)
• Вертикальная основная ось: flex - direction: column;

Например:

Flex-элементы

Теперь поговорим о том, как размещать нашу мебель (элементы Flex).

• justify - content: Это свойство контролирует, как элементы Flex распределяются вдоль основной оси. Представьте, что вы настраиваете расстояние между диваном и стульями, чтобы убедиться, что они не слишком далеко друг от друга и не слишком близко.
• align - items: Это свойство определяет, как элементы Flex выравниваются вдоль поперечной оси. Это похоже на то, чтобы убедиться, что все ваши картины виснут на одном уровне, делая комнату выглядеть уютной.
• flex - grow: Представьте, что вы хотите, чтобы ваша книжная полка занимала всю или часть оставшегося пространства. С помощью этого свойства вы можете "растить" элемент мебели, чтобы заполнить дополнительное пространство.

Посмотрим, как действует волшебство Flexbox на простом макете, состоящем из контейнера и трех элементов. Что мы хотим сделать, это центрировать эти три элемента по горизонтали внутри контейнера и убедиться, что они равномерно распределены, когда есть достаточно места.

При этом нашу мебель (элементы) будет размещена, как мы хотели.

Flexbox действительно похож на волшебство, позволяя нам разрабатывать веб - страницы с前所未有的 гибкостью и простотой. Теперь, когда вы освоили это волшебство, попробуйте его! Создайте свою мечтую "комнату"!

Для яркого демонстрации волшебства Flexbox я сгенерирую иллюстрацию, показывающую комнату с макетом Flexbox, в которой есть элементы мебели (например, диван, кофейный столик и книжная полка), представляющие разные элементы Flex. Это покажет, как они элегантно размещаются в комнате с использованием свойств Flexbox, таких как justify - content и align - items.

В целом, Flexbox - это одномерный модель макета, которая позволяет легко выравнивать элементы по горизонтали или вертикали, и идеально подходит для создания адаптивных дизайнов. Вот некоторые важные термины, которые вам необходимо знать:

• Контейнер Flex: Родительский элемент, содержащий элементы Flex.
• Элемент Flex: Индивидуальный элемент внутри контейнера Flex.
• Направление Flex: Определяет главную ось контейнера.
• Обтекание Flex: Управляет тем, должны ли элементы обтекать несколько строк или нет.
• Выравнивание содержимого: Выравнивает элементы вдоль основной оси.
• Выравнивание элементов: Выравнивает элементы вдоль поперечной оси.

Теперь, когда мы знаем, как использовать Flexbox, мы можем добавить следующее в style.css:

body {
  display: flex;
  flex - direction: column;
  letter - spacing: 2px;
  font - weight: 400;
  font - size: 1.2vw;
}
header {
  display: flex;
  flex - direction: row;
  background - color: rgb(233, 174, 87);
  width: 100%;
  max - height: max - content;
  min - height: 1em;
  padding - top: 1%;
  padding - bottom: 1%;
  text - transform: uppercase;
}
ul {
  list - style: none;
  display: flex;
  flex - direction: row;
}
.navigation - section {
  width: 70%;
}
section {
  display: flex;
  flex - direction: row;
  width: 100%;
  padding: 10% 0;
}
.story - sect {
  display: flex;
  flex - direction: row - reverse;
  background - color: rgb(233, 174, 87);
  color: #fff;
}
.samples {
  flex - direction: column;
  text - align: center;
}
footer {
  display: flex;
  flex - direction: row - reverse;
  height: 5em;
  width: 100%;
  color: #fff;
  background - color: rgb(239, 206, 157);
  text - transform: uppercase;
}

Резюме

В этом лабе Джордан успешно применил Flexbox к сайту "Дом для питомцев", улучшив адаптивность и эстетику его макета. С помощью шагов, направленных на заголовок, навигацию и основные разделы, сайт теперь эффективно отображает контент на различных устройствах. Flexbox оказался бесценным инструментом при создании динамических и гибких макетов, демонстрируя свою важность в современном веб - дизайне.