• Страница 1 из 1
  • 1
Модератор форума: ABC  
Форум » Cascading Style Sheets (CSS) » Верстка страниц с помощью CSS » Flexbox-вёрстка » Знакомство с flexbox-вёрсткой (Базовые основы)
Знакомство с flexbox-вёрсткой
ABCДата: Вт, 02.04.2019, 22:52 | Сообщение # 1
Offline
Суть flexbox-вёрстки заключается в том, что используется какой-то HTML-элемент (практически любой), называемый flex-контейнером, внутрь которого помещаются другие элементы, flex-элементы.

Чтобы сделать какой-либо HTML-элемент flex-контейнером, нужно в его CSS-свойствах прописать:

Код
display: flex;


Всё. Теперь это flex-контейнер, а все элементы внутри него (его прямые потомки) становятся автоматически flex-элементами.

К примеру, рассмотрим вариант, когда есть блок div с классом "container", внутри которого содержатся три другие блока div.

Код
<div class="container">
<div>Содержимое первого блока</div>
<div>Содержимое второго блока</div>
<div>Содержимое третьего блока</div>
</div>


Если мы пропишем для блока с классом "container" следующее:

Код
.container {
  display: flex;
}


то он автоматически становится flex-контейнером, а три блока div внутри него - flex-элементами.

Элементы, являющиеся flex-элементами, могут быть совершенно разными, например,в flex-контейнере могут быть одновременно и блоки div и абзацы и ul.


Но только дочерние элементы flex-контейнера становятся flex-элементами! К примеру, возьмём неупорядоченный список, помещённый во flex-контейнер, ul является flex-элементом, а вот элементы li внутри ul уже не будут flex-элементами.
 
профиль цитата изменить удалить
ABCДата: Пт, 05.04.2019, 15:02 | Сообщение # 2
Offline
Рассмотрим конкретный пример. Имеем: один блок div с классом 'container' и три блока div внутри него.

Код
<div class="container">
<div class="red">Первый блок</div>
<div class="blue">Это второй блок</div>
<div class="green">Ну а это третий блок</div>
</div>


Пропишем в CSS-стилях для div c классом 'container':

Код
.container {
  display: flex;
}


Теперь этот блок будет flex-контейнером, а три блока внутри него flex-элементами.

Для демо-страницы я также пропишу следующее: добавлю для блока с классом 'container' ширину, цвет фона и выравнивание по центру страницы, а для каждого из вложенных в него блоков свой цвет фона (для наглядности работы flex-вёрстки):

Код
.container {
  display: flex;
  width: 800px; /* ширина flex-контейнера */
  background-color: #ffffff; /* цвет фона контейнера */
  margin: 50px auto; /* выравнивание контейнера по центру страницы */
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}
.green {
  background-color: green;
}


Давайте посмотрим, что у нас получилось.

А получилось вот что: мы видим, что блоки div, вложенные в контейнер с классом 'container', расположились внутри него рядом, один за другим, без всяких отступов.
Причём они не заняли всю ширину родительского блока (мы видим белый фон справа от блоков - это часть, не занятая flex-элементами сейчас), каждый flex-элемент по ширине равен ширине контента внутри него.

Если же нам нужно, чтобы вложенные во flex-контейнер блоки заполнили его полностью, и чтобы при этом каждый из них имел одинаковую ширину, то для них нужно в CSS-стилях прописать следующее:

Код
.container div {
  flex: 1;
}


Смотрим что получится на демо-странице. Несмотря на разный объём текста в каждом из блоков, их ширина одинаковая.

Здесь более наглядный пример. По умолчанию, flex-элементы во flex-контейнере соприкасаются друг с другом безо всяких отступов, и в данном демо-примере сделаны отступы слева, начиная со второго элемента с помощью CSS-селектора nth-of-type:

Код
.container div:nth-of-type(1n+2) {
margin-left: 20px;
}


Ну и, лирическое отступление, чтобы придать более-менее цивильный вид, уберём индивидуальный цвет фона у блоков внутри flex-контейнера и зададим ему внутренние отступы:

Код
.container {
  width: 800px;
  background-color: #ffffff;
  margin: 50px auto;
  display: flex;
  padding: 10px;
}
.container div {
    flex: 1;
}
.container div:nth-of-type(1n+2) {
margin-left: 20px;
}


Получим это. Вот так легко и просто, с минимумом кода, flexbox-вёрстка даёт возможность сделать несколько колонок одинаковой ширины и высоты.
 
профиль цитата изменить удалить
Форум » Cascading Style Sheets (CSS) » Верстка страниц с помощью CSS » Flexbox-вёрстка » Знакомство с flexbox-вёрсткой (Базовые основы)
  • Страница 1 из 1
  • 1
Поиск: