Сверстать как на картинке
- все птицы (за исключением последней вороны), деревья и лягушки должны быть не резиновыми и занимать ровно столько места сколько им надо.
- создать отдельные классы для деревьев и рыбок, чтобы раскрасить блоки
Верстка / Основы flex. Подключаем fontawesome
До этого мы работали с блоками по отдельности. А тут попробуем уже поработать с общей структурой.
В целом, какой сайт не возьми, получается набор строк и столбцов. И строки мы в принципе уже умеем делать, то есть какой бы div мы не вставили он уже полностью занимает всю строку:
<div class="block"></div>
<style>
.block {
border: 1px solid black;
height: 1rem; /* явно указал высоту блока в единице измерения rem, которая равна стандартной высоте одной строки */
margin-bottom: 0.5rem; /* отступ снизу */
}
</style>
и если я добавлю три блока, то все они будут занимать одну строку
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
и вот встает вопрос, а что делать если я хочу, чтобы они выводились не построчно, а все вместе встали бы в одну строку?
Для этого мы воспользуемся возможностями специального набора стилей именуемых флексами (flex).
Сначала обернём все три наших блока в один див, и присвоим ему класс row:
<div class="row">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
визуально ничего не изменится
а теперь пропишем стили для класса row
<style>
.block { /* ... */ }
.row {
display: flex;
}
</style>
И тут же у нас все блоки схлопнутся в строку, и видны останутся только границы
а теперь самое главное мы укажем у наших блоков сколько относительного места им полагается занимать в строке. Для этого используется свойство flex-grow, добавим его в класс block
<style>
.block {
border: 1px solid black;
height: 1rem;
margin-bottom: 0.5rem;
flex-grow: 1; /* добавил */
}
.row {
display: flex;
}
</style>
и так, теперь все блоки растянулись по строке, и каждый, так как у всех flex-grow один и тот же, занимает одинаковую долю равную 1:
я могу заставить какой-нибудь блок заставить быть в два раза больше других для этого я прям добавлю ему стиль и укажу значение flex-grow: 2
<div class="row">
<div class="block"></div>
<div class="block" style="flex-grow: 2;"></div>
<div class="block"></div>
</div>
теперь второй блок занимает две доли, а остальные по одной
правда все это начинает себя очень интересно вести, когда мы не просто пустые блоки, а еще добавляем туда какое-нибудь содержимое.
Подключаем сторонюю библиотечку
Чтобы было веселее я буду вместе с текстом использовать иконки.
Для иконок существует замечательная библиотечка fontawesome в которой тьма иконок на любой цвет и вкус.
Чтобы начать ее использовать в своем файле надо добавить ссылку на ее стили, у всех библиотечек это делается немного по-разному.
Для fontawesome следующим образом. Вверху файлика, там где
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
добавляем ссылку где-то внутри тега head, вот так
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" />
</head>
теперь выбираем категорию, я буду добавлять звериков
затем тыкаю на котяру напирмер
и копирую тег с классом
теперь вставляю себе в блоки
<div class="row">
<div class="block">
тут собачка живет
<i class="fas fa-dog"></i>
</div>
<div class="block" style="flex-grow: 2;">
<i class="fas fa-cat"></i>
<i class="fas fa-cat"></i>
<i class="fas fa-cat"></i>
</div>
<div class="block">
<i class="fas fa-kiwi-bird"></i>
дом киви
</div>
</div>
получится как-то так:
иконки кажутся сильно маленькими, поэтому я добавлю класс fa-2x встроенный в библиотечку который позволяет увеличить размер иконок
так, чего-то все повылазили из блоков… а, ну это потому что мы явно высоту блока в классе прописали, уберем там стиль height
<style>
.block {
border: 1px solid black;
/* убрал height: 1rem; */
margin-bottom: 0.5rem;
flex-grow: 1;
}
/* ... */
</style>
добавим им немного воздушного пространства
<style>
.block {
border: 1px solid black;
margin-bottom: 0.5rem;
margin: 0.25rem; /* оступы вокруг блоков */
padding: 0.5rem; /* отступы внутри блоков */
flex-grow: 1;
}
/* ... */
</style>
все теперь вроде ок выглядит.
Разбираемся с шириной
Вот между прочим я хотел, чтобы второй блок был вдвое больше остальных по ширине, а он получается едва ли не меньше первого блока, плюс первый и последний блоки должны быть равны.
Как же так получается, мы же там вот это flex-grow: 1; прописывали. Дело в том, что flex-grow пытается распределить именно пустое место в блоках не учитывая места занимаемое содержимым
а за размер содержимого отвечает стиль flex-basis, который по умолчанию пытается уместить все содержимое в одну строку.
Чтобы flex-grow начал учитывать и содержимое, надо прописать свойство flex-basis: 0
.block {
border: 1px solid black;
margin-bottom: 0.5rem;
margin: 0.25em;
padding: 0.5em;
flex-grow: 1;
flex-basis: 0; /* добавил */
}
от теперь все как прописано во flex-grow, первый и последний равны, второй вдвое больше
Фиксируем размер блока
сейчас у нас получается резиновая верстка
но иногда хочется, чтобы какой-то блок не реагировал на растяжения, например, я хочу, чтобы домик киви всегда был фиксированного размера.
Для этого я могу указать свойство flex-grow равным нулю, ну то есть grow – значит расширятся, а если поставить 0 то мы говорим что не расширяйся, добавим прямо в блок этот стиль
<div class="row">
<!-- ... -->
<div class="block" style="flex-grow: 0;">
<i class="fas fa-2x fa-kiwi-bird"></i>
дом киви
</div>
</div>
хм, чет сильно ужали эту киви
вообще тут интересно на самом деле, то есть собака и котики находятся в корректной пропорции, а киви ужато по самое не могу, так чтобы кошки и собаки заняли максимальное возможно пространство.
Как же облегчить судьбу несчастной птицы? Помнишь мы указывали свойство flex-basis: 0 для всех блоков, чтобы растяжение было пропорционально. Так вот, через это свойство мы можем указать конкретную ширину блока, это по сути аналог width но для флексовой верстки. Например, поставлю туда 250px
<div class="row">
<!-- ... -->
<div class="block" style="flex-grow: 0; flex-basis: 250px;">
<i class="fas fa-2x fa-kiwi-bird"></i>
дом киви
</div>
</div>
и усё, теперь птичка круче всех:
но вообще конечно это перебор, если надо чтобы просто птичка не была ужата, просто укажем значение auto
<div class="row">
<!-- ... -->
<div class="block" style="flex-grow: 0; flex-basis: auto;">
<i class="fas fa-2x fa-kiwi-bird"></i>
дом киви
</div>
</div>
и тогда блок займет ровно столько места сколько ему надо:
В общем, теперь можем добавлять сколько угодно строк и в каждом прописывать уникальные поведение блоков
<div class="row">
<!-- ... -->
</div>
<!-- добавил второй ряд -->
<div class="row">
<div class="block" style="flex-grow: 3; text-align: center;">
<i class="fas fa-2x fa-dog"></i>
<i class="fas fa-2x fa-dog"></i>
<i class="fas fa-2x fa-dog"></i>
</div>
<div class="block" style="flex-grow: 1; ">
<i class="fas fa-2x fa-horse"></i>
лошадка
</div>
</div>
вот такие дела
5