Flexbox CSS #2 - Направление осей и многострочность (практика)

Дополнительное видео

ПОДПИСКА на УРОКИ

Email*

Выбери свою тему

Предложи новую тему

Соглашение на обработку перс. данных *

Предоставлено SendPulse

скачать

Demo

Денис Горелов
CSS и CSS3
Урок: 2
Просмотров:
0

Описание видео
Отзывы

Flexbox CSS #2 - Практика работы с осями

Разберем простой пример верстки страницы при помощи flexbox, вспомним заодно свойства из предыдущего урока, а самое главное рассмотрим один из вариантов, где выручает свойство flex-direction.

See the Pen #2 Практика по Flexbox (Направление осей) by Denis (@Dwstroy) on CodePen.

Заготовка к уроку - скачать

Я за ранее подготовил исходные файлы, и пробежимся по их структуре.

В архиве присутствует index файл, в нем заголовок title, мета тег viewport для адаптации, ниже подключаю основные стили, которые находятся в папке CSS, файл style.css содержит стили для body, где сбрасываем для него отступы, задаем шрифт и картинку на задний фон.

Описание свойств Flexbox CSS - flex-direction | flex-wrap

body {
 margin: 0;
 padding: 0;
 font-family: Verdana, sans-serif;
 background: url("../img/kindajean.png");
}

В файле media.css находится один медиа запрос, к нему мы еще вернемся.

@media all and (max-width: 580px) {

}

Обратите внимание, что сам файл будет подключаться при разрешении экрана в 820 пик. Далее в теле странице идет блок div с оберткой и в принципе на этом html структура закончена.

<!DOCTYPE html>
<html lang="ru">
<head>
   <meta charset="UTF-8">
   <title>#2 Практика по Flexbox (Направление осей)</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="css/style.css" type="text/css">
   <link rel="stylesheet" href="css/media.css" media="all and (max-width: 820px)">
</head>
<body>
<div class="dws-wrapper">

</div>
</body>
</html>

В папке img две картинки, одна на задний фон, другая логотип.

В отличие от простой верстки, каких либо элементов, я страницы не верстаю целиком, всегда разбиваю ее на блоки и верстаю их по отдельности. Возьмем стандартную структуру из трех блоков header, container, и footer.

.header+.container+.footer

<div class="dws-wrapper">
   <div class="header">Header</div>
   <div class="container">container</div>
   <div class="footer">footer</div>
</div>

Header, это верхняя часть страницы, в нем расположим горизонтальное меню, логотип, баннер и т.д.

Container, в нутрии его будем располагать тело страницы, левый сайтбар, и область для контента.

Footer, он будет подвалом страницы.

Родительскому контейнеру зададим белый цвет, максимальную ширину укажем в 900 пик. Делаем внутренние отступы, при помощи margin: auto выравниваем блок по горизонтали, а для понимания, какое пространство занимают каждый из блоков, добавим для них задний фон.

.dws-wrapper{
 background: #ffffff;
 max-width: 900px;
 padding: 0 10px;
 margin: auto;
}
.header {
 background: #e7bf9e;
}
.container {
 background: #91c4da;
}
.footer {
 background: #153243;
}

Приступаем к разметке первого блока header, в нутрии его размещаем логотип, затем идет блок UL с классом top-menu, а в нутрии его списки LI, в которых вкладываем ссылку и все это делаем в количестве шести штук. Прописываем пункты меню, и ниже делаем блок для баннера где вставляем картинку.

<img src="img/logo.png">
ul.top-menu>(li>a[href="#"])*6

<ul class="top-menu">
   <li><a href="#">Главная</a></li>
   <li><a href="#">Новости</a></li>
   <li><a href="#">Блог</a></li>
   <li><a href="#">Статьи</a></li>
   <li><a href="#">Портфолио</a></li>
   <li><a href="#">Контакты</a></li>
</ul>
<div class="banner">
   <img src="http://via.placeholder.com/1000x250">
</div>

Вот таким образом выглядит структура header, и давайте ее теперь оформим в CSS.

Начинаем с логотипа, для него просто задам внешние отступы. Затем приведем в порядок списки, убираем внутренние и внешние отступы, скрываем маркеры, зададим для них фоновый цвет и сделаем UL flex-контейнером, а при помощи justify-content выровним их посередине.

.header img {
 margin: 10px;
}
ul.top-menu {
 margin: 0;
 padding: 0;
 list-style: none;
 background-color: #216980;
 display: flex;
 justify-content: center;
}

Оформляем пункты меню, то есть ссылки, делаем их белым цветом, задаем внутренние отступы в 12 пик, убираем подчеркивание, делаем заглавными буквами, уменьшим до 15 пик, и делаем блочными элементами. По наведении изменяем цвет области LI. Для баннер задаем margin: auto и ширину установим в 100%.

.top-menu li a {
 color: #fff;
 padding: 12px;
 text-decoration: none;
 text-transform: uppercase;
 font-size: 15px;
 display: block;
}
.top-menu li:hover {
 background: #153243;
}
.banner img {
 margin: auto;
 width: 100%;
}

Затем переходим к следующему блоку container, и делаем его разметку. В нутрии контейнера располагаем два блока, sidebar для левого меню, и блок content для содержания страницы они будут flex-элементами.

<div class="container">
   <div class="sidebar">
      sidebar
   </div>
   <div class="content">
      content
   </div>
</div>

Для этого задаем container свойство display: flex и делаем отступы сверху и снизу. Sidebar, теперь стал flex-элементом, временно для него зададим задний фон, и сделаем его шириной в 250 пик. Блок content являющийся тоже flex-элементом шириной в 100%, для него зададим задний фон и отодвинем немного правее.

.container {
 display: flex;
 padding-top: 10px;
 padding-bottom: 10px;
}
.sidebar {
 background: #e7bf9e;
 width: 250px;
}
.content {
 width: 100%;
 background: #a4e2ff;
 margin-left: 20px;
}

Посмотрим, как они будут вести себя, когда заполним его текстом. Такой еще момент, когда текст идет сплошным словом без пробелов, получается, он вылезает за пределы блока, что бы это исправить достаточно, задать свойство word-wrap.

word-wrap: break-word;

Далее сделаем разметку sidebar, разместим в нем блок UL, в качестве меню будут его списки, а за ним поместим два изображения. В блоке content, располагаем основной контент страницы, вначале идет текстовое содержание. Ниже блок с информацией, у которого присутствует картинка, заголовок второго уровня и текстовое содержание. Таких блоков сделаем несколько штук.

ul.sidebar-menu>(li>a[href="#"])*6

<div class="sidebar">
   <ul class="sidebar-menu">
      <li><a href="#">HTML / HTML5</a></li>
      <li><a href="#">CSS / CSS3</a></li>
      <li><a href="#">Flexbox</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">Плагины</a></li>
      <li><a href="#">Модули</a></li>
   </ul>
   <img src="http://via.placeholder.com/250x300">
   <img src="http://via.placeholder.com/250x300">
</div>

   <h1>Lorem ipsum dolor sit amet.</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi deleniti deserunt fugiat fugit hic iure
      nesciunt optio perferendis quam sapiente.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi deleniti deserunt fugiat fugit hic iure
      nesciunt optio perferendis quam sapiente.</p>

<div class="box-text">
   <img src="http://via.placeholder.com/200x150">
   <div class="text">
      <h2>Lorem ipsum dolor sit</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur autem consequatur cumquedicta earumillo libero quaerat! Consequatur eveniet fuga rem velit? Alias, eius facilis laborum nostrum nulla numquam odio.</p>
   </div>
</div>

Затем визуально оформим текущие блоки. Начинаем с блока UL, затем списки LI и ссылки в нем.

.sidebar-menu {
 background: #676767;
 padding: 0;
 margin: 0;
 list-style: none;
}
.sidebar-menu li {
 border-bottom: solid 1px #4a4a4a;
}
.sidebar-menu li a {
 color: #fff;
 font-size: 14px;
 display: block;
 padding: 10px;
 text-decoration: none;
 text-transform: uppercase;
}
.sidebar-menu li:hover {
 background: #153243;
}

Далее выравниваем картинки, и убираем задний фон у блока. Затем переходим к оформлению блока с основным текстовым содержанием.

sidebar img {
 text-align: center;
 margin-top: 10px;
}
.content {
 width: 100%;
 /*background: #a4e2ff;*/
 margin-left: 20px;
}
.content h1 {
 color: #525252;
 margin: 5px 0;
}
.content p {
 color: #525252;
 margin: 10px 0;
}

В нутрии у нас расположен блок с классом box-text, зададим для него светлый фон и обводку. Сделаем отступы, и далее нам нужно расположить текст с правой стороны картинки. Ранее это мы делали при помощи float, отбирали картинку и задавали ей обтекание, но получали такую ужасную картину.

Структура сыпалась, приходилось сбрасывать обтекание и дополнительно устанавливать отступы. Сейчас это все можно реализовать при помощи свойства display: flex, все элементы выравниваются в контейнере. Далее оформляем текст.

.box-text {
 background: #f3f3f3;
 border: 1px solid #cbcbcb;
 margin-top: 15px;
 margin-bottom: 15px;
 display: flex; 
}
.box-text img {
 margin-right: 10px;
}
.text h2 {
 color: #525252;
}
.text p {
 font-size: 14px;
}

Последний блок для оформления это footer. Как вариант, можно сделать его flex-контейнером и содержащий в нем элемент выровнять при помощи margin: auto.

.footer {
 background: #153243;
 height: 50px;
 display: flex;
}
.footer p {
 color: #ffffff;
 margin: auto;
}

Вот таким образом при помощи flexbox можно оформить стандартную страницу, мы в состоянии отказаться от float и задействовать display: flex.

Я полагаю, вы и сами это осознали, поэтому суть этого урока показать не просто верстку страницы, а именно использование свойства flex-direction, то есть, при помощи которого меняем направления осей.

Теперь рассмотрим типичную ситуацию, когда нам нужно адаптировать данную страниц под мобильное устройство и посмотрим в итоге, что получится.

Адаптация под мобильные устройства

Открываем файл медиа, и опишем свойства для разрешения в 820 пик. Начинаем как всегда с самого верха, работаем с контейнером header. По структуре в нем идет первый логотип, и для него зададим разрешение в 100 пик. В нашем случае уменьшился основной баннер, для него делаем разрешение в 100%. Текст верхнего меню уменьшим до 12 пик.

.header img {
 width: 100px;
}
.banner img {
 width: 100%;
}
.top-menu li a{
 font-size: 12px;
}

Затем переходим к оформлению блока container. Не все блоки на разрешении менее 820 пик помещаются в область контейнера и в этом случае оптимальный вариант выстроить их в колонку по вертикали. Так как блок container это flex-контейнер, соответственно в нем находятся flex-элементы, а значит для того что бы их выстроить по вертикали достаточно задать свойство flex-direction со значением column.

Для элементов в sidebar задаем 100% и текстовое значение выравниваем по середине, изображение тоже выровнялись так как это строковый элемент.

Для изображения задаем отступы, а у блока content убираем их с лева.

.container {
 flex-direction: column;
}
.sidebar {
 width: 100%;
 text-align: center;
}
.sidebar img {
 margin: 10px 5px 10px;
}
.content {
 margin-left: 0;
}

Далее описываем стили при разрешении в 580 пик.

Предположим, что верхнее меню будет скрываться, и вы можете его в дальнейшем отображать в виде колонки, которая будет появляться по нажатию на иконку. Кому интересно как это сделать смотрите урок «Адаптация горизонтального меню», а тут для примера его просто скроем и в место его вставим синею полоску. Баннер нам тоже не понадобится, добавляем его класс к уже созданному правилу.

У меню сделаю нижний отступ, а картинку sidebar увеличим на 100% и выроним посередине.

.top-menu li,
.banner {
 display: none;
}
.top-menu::before {
 content: '';
 height: 39px;
}
.sidebar-menu {
 margin-bottom: 5px;
}
.sidebar img {
 width: 100%;
 margin: 5px auto;
}

Затем переходим к контенту, оформляем текст. Оформлению отдельного блока box-text. Тут оптимальным вариант вижу, расположить все элементы в одну колонку. Так как блок является flex-контейнером, добавляем для него свойство flex-direction со значением column. Все элементы выстроились в колонку.

Убираем для изображения отступы и зададим фиксированную высоту и в заключение оформим текстовое содержание.

.content h1 {
 font-size: 26px;
}
.content p {
 font-size: 14px;
}
.box-text {
 flex-direction: column;
}
.box-text img {
 margin: 0;
 height: 150px;
}
.text {
 padding: 10px;
}
.text h2 {
 font-size: 20px;
 margin: 5px 0 0;
}

В результате мы получили адаптивную верстку, но суть данного урока не показать, как верстать с помощью flexbox, а разобрать моменты, где используется свойство flex-direction.

Один из случаев который показал я, это когда элементы из горизонтального положения, перестраиваются в вертикально колоночный вид. Теперь разберем второй момент, обратите внимание, что когда просматриваем страницу в мобильном отображении в первую очередь идут элементы, которые не первостепенные. Это само собой, так как по структуре они расположены DOM элементов, они расположены выше.

Данное меню и картинки являются неважными, а нам нужно на мобильном разрешении расположить основной контент в самом начале, что бы пользовать, открыв такого рода страницу, видел именно его. Раньше такие моменты делали при помощи специфической верстки, флоутили элементы, а потом их позиционировали, другой из вариантов это использовали JS. Теперь это реализуется одной строчкой, и я думаю, все вы догадались, как это делается, мы переворачиваем ось, делая ее направление снизу вверх. Добавляем для flex-контейнера значение column-reverse и элементы поменяли направление.

На самом деле нечего сложного нет, главное понимать, как все работает и для чего те или иные свойства нужны, вот именно на таких практических примерах, приходит осознание общей концепции flexbox.

Урок подготовил Горелов Денис.

Оставить комментарий:

Загрузка...

Отзывы

Отзывов нет.

Написать отзыв

Ваше имя:*

Текст отзыва:*

Защита от автоматического заполнения:

CAPTCHA

Введите слово с картинки:*

Отправляя форму, Вы принимаете условия "Соглашения на обработку персональных данных"

* - Обязательные поля

5 предыдущих видео

Flexbox CSS #1 - Выравнивание по вертикали и горизонтали (практика) Просмотров:(
0
)
CSS Grid или Bootstrap? | Своя модульную сетка в web-дизайне Просмотров:(
0
)
Тройная АНИМАЦИЯ на CSS | transform - transition Просмотров:(
0
)
CSS3 flexbox практика | Эффект при наведении в CSS Просмотров:(
0
)
Flexbox горизонтальное меню за 7 минут / CSS + HTML Просмотров:(
0
)

Flexbox CSS - (Практика) #2

Дополнительное видео

Flexbox CSS #2 - Практика работы с осями

Адаптация под мобильные устройства

Оставить комментарий:

Отзывы

Написать отзыв

5 предыдущих видео