На смену традиционным способам вёрстки к нам пришла технология FlexBox, на которую стоит обратить большое внимание. FlexBox – это новая удобная технология для вёрстки веб-страниц, при помощи которой мы можем решать старые типичные проблемы, новыми способами легко и удобно.
Рассмотрим пример #1.
Это касается вечной и наболевшей темы вертикальных выравниваний. Посмотрим на изображение …
Допустим нам надо, чтобы всплывающий блок, который появляется при чтении какой-либо статьи, выглядел следующим образом …
… Кнопка Share on Twitter стояла слева, а название статьи или любой другой текст обтекал её справа. При этом надо чтобы кнопка Share on Twitter стояла всегда вертикально по центру, независимо какой у нас будет текст справа, потому что этот текст, как Вы понимаете, может быть произвольным.
Вёрстка традиционным способом при помощи float.
Для начала мы сделаем это традиционным способом, как это делалось до появления FlexBox …
Ниже я приведу код файлов index.html и style.css. Здесь у нас начальная вёрстка и простое стилевое оформление элементов. А мы в данной статье сфокусируемся на их позиционировании. Картинку на файл twitter.png можно скачать здесь, если лень искать.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FlexBox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="button">
<span>Share on Twitter</span>
</div>
<div class="content">
Здесь будет текст. Здесь будет текст. Здесь будет текст.
</div>
</div>
</div>
</body>
</html>style.css
body {
margin: 0;
font-family: 'PT Serif', Georgia;
}
.wrapper {
background: #ddd;
padding: 10px 0;
overflow: hidden;
}
.container {
max-width: 960px;
margin: 0 auto;
}
.button {
background: #55acee;
color: #fff;
text-align: center;
border-radius: 5px;
cursor: pointer;
float: left;
width: 25%;
margin-right: 2%;
}
.button:hover {
box-shadow: 0 -50px 40px rgba(0, 0, 0, 0.1) inset;
}
.button span {
display: inline-block;
padding: 10px 0 10px 30px;
background: url('img/twitter.png') left center no-repeat;
background-size: 30px;
}
.content {
font-size: 25px;
}
Задача кажется нам простой, так как мы привыкли это делать через свойства float: left. Далее мы задаём какую-то ширину width: 25%, а также отступ справа, чтобы оттолкнуться от текста margin-right: 2%.
.button {
float: left;
width: 25%;
margin-right: 2%;
}Также такому элементу обычно ставится display-inline: block, если нужно чтобы у него margin и padding работали корректно, хотя это делать не обязательно.
Посмотрим на результат:
Ну и вот, казалось бы, что всё работает и так, без всяких FlexBox. И практически расположено всё правильно, разве что справа текст стоит вертикально не по центру, плюс ещё может налезать. Хотя чтобы такого не было, можно прописать overflow: hidden классу content. Но опять же в данной ситуации — это делать не обязательно.
Однако мы получаем ситуацию, при которой текст справа каким-то чудом влез, но стоит он не совсем ровно и при помощи свойства line-height мы можем его выровнять. Но если у Вас вёрстка адаптивная, то Вам придётся просчитывать вот такую ситуацию …
… когда возникает резоннейший вопрос, как эту кнопку поставить вертикально по центру! Другой момент заключается в том, что текста справа элементарно может быть больше по размеру …
… и тогда даже не закладываясь на адаптивность макета мы получаем вот такую неприятную ситуацию. Вот такие дела!
В традиционной вёрстке нормального решения этой проблемы нет, потому как вертикальных выравниваний для div блоков придумано не было. Придётся извращаться и ставить display: table или display: table-cell и там пытаться использовать vertical-align: middle. Этот приём достаточно известный, но неудобный и требует достаточно большого количества кода. Плюс обращение с элементом будет проходить, как с ячейкой таблицы. А там процентная ширина будет уже немного по-другому себя вести.
Вёрстка современным способом при помощи FlexBox.
Ну а теперь коснёмся FlexBox и тут будет всё очень коротко и эффективно.
Приведу опять же готовый файл стилей style.css, а index.html остаётся без изменений. А ниже просто объясню, как это работает.
style.css
body {
margin: 0;
font-family: 'PT Serif', Georgia;
}
.wrapper {
background: #ddd;
padding: 10px 0;
overflow: hidden;
}
.container {
max-width: 960px;
margin: 0 auto;
display: flex;
align-items: center;
}
.button {
background: #55acee;
color: #fff;
text-align: center;
border-radius: 5px;
cursor: pointer;
margin-right: 2%;
flex: 1;
}
.button:hover {
box-shadow: 0 -50px 40px rgba(0, 0, 0, 0.1) inset;
}
.button span {
display: inline-block;
padding: 10px 0 10px 30px;
background: url('img/twitter.png') left center no-repeat;
background-size: 30px;
}
.content {
font-size: 25px;
flex: 3;
}В первую очередь нам нужно поработать с div блоком container. Потому что именно он является той внешней обёрткой, которая будет делать внутри себя FlexBox.
И ставим этому блоку простое свойство display: flex
.container {
display: flex;
}И уже одно данное свойство выставляет всё так как нам нужно. Мы получаем левую и правую части.
Получается, что свойство float: left, которое мы использовали в примере выше, отпадает. Причём стоит отметить, что в данном случае мы выставляем display: flex общему container блоку, или обёртке. А в примере выше, именно блоку с button кнопкой мы прописывали float: left! На мой взгляд это важно понимать.
Далее мы пропишем свойство flex для левой и правой части. А также допишем margin-right: 2%, который был в примере выше.
.button {
flex: 1;
margin-right: 2%;
}
.content {
flex: 3;
}Проще говоря мы делим блок container на 4 части. Кнопке — 25%, а тексту — 75%.
В итоге мы получаем полный эквивалент того, что было в вёрстке сделанной классическим способом в примере выше.
При этом у нас также имеется великолепное свойство align-items. Это свойство выравнивает элементы по вспомогательной поперечной оси.
.container {
display: flex;
align-items: center;
}Таким образом текст встаёт туда куда нужно – по центру. В случае если текст увеличиться, то логически и текст, и кнопка будут правильно и по центру стоять друг напротив друга. То есть свойство align-items довольно логично работает. Если мы попробуем двигать окно браузера, то соответственно можем понять, что при адаптивной вёрстке макет будет менять свои размеры. И никаких проблем также не будет происходить, и выглядеть очень даже приятно.
Кстати, если же саму кнопку сделать при помощи FlexBox, то она тоже будет выглядеть лучше, при небольшом размере окна браузера.
Вывод: в традиционной вёрстке с float у нас большие проблемы с вертикальным выравниванием, и при помощи FlexBox нам их хорошо удаётся решить.
Пишите свои комментарии по этому поводу, и голосуйте за статью. Ведь писать статьи по программированию не так уж легко.
