Блочная Flexbox верстка на примерах
13 февраля 2020 CSS
Flexbox — это новый, более эффективный способ выравнивания блоков в HTML вёрстке. Появление Flexbox, а точнее свойства display: flex; заметно облегчило жизнь многим веб-разработчикам, и сейчас применяется в фреймворке Bootstrap 4. Возможно поначалу кому-то будет сложно отойти от привычного float: left; и тому подобного, но немного разобравшись вы почувствуете все прелести Flexbox, и надеюсь эта статья вам в этом поможет.
Содержание
display: flex
Чтобы выстроить блоки в контейнере, необходимо добавить к родительскому элементу свойство display: flex; после чего все его дочерние элементы выстроятся ровно в ряд.
При чем не важно какой ширины каждый из них.
Это что-то вроде сетки Bootstrap, только работающая от одной строчки в CSS.
Каждый элемент теперь можно настроить в зависимости от необходимости. Для этого применяются дополнительные свойства, которые мы рассмотрим ниже.
flex-direction
Направление перечисления блоков.
flex-direction: row; — строка (значение по умолчанию).flex-direction: row-reverse; — строка с элементами в обратном порядке.flex-direction: column; — колонка.flex-direction: column-reverse; — колонка с элементами в обратном порядке.
flex-wrap
Управляет переносом блоков.
flex-wrap: nowrap; — блоки не переносятся (значение по умолчанию).flex-wrap: wrap; — блоки переносятся.flex-wrap: wrap-reverse; — блоки переносятся и располагаются в обратном порядке.
order
Управляет порядком блоков.
Например order: -1 установит блок самым первым в контейнере.
justify-content
Выравнивает блоки по горизонтали.
justify-content: flex-start; — элементы выравниваются от начала главной оси (значение по умолчанию);justify-content: flex-end; — элементы выравниваются от конца главной оси;justify-content: center; — элементы выравниваются по центру главной оси;justify-content: space-between; — элементы выравниваются по главной оси, распределяя свободное место между собой;justify-content: space-around; — элементы выравниваются по главной оси, распределяя свободное место вокруг себя.
align-items
Выравнивает блоки по вертикали.
align-items: flex-start; — элементы выравниваются от начала перпендикулярной оси.align-items: flex-end; — элементы выравниваются от конца перпендикулярной оси.align-items: center; — элементы выравниваются по центру.align-items: baseline; — элементы выравниваются по базовой линии.align-items: stretch; — элементы растягиваются, занимая все пространство по перпендикулярной оси (значение по умолчанию).
align-self
Также выравнивает блоки по вертикали, но задается отдельным элементам. Нужно продвижение сайта? Здесь продвижение сайтов в Самаре
align-self: auto; — значение по умолчанию. Означает, что элемент использует align-items родительского элемента.align-self: flex-start; — элемент выравнивается от начала перпендикулярной оси.align-self: flex-end; — элемент выравнивается от конца перпендикулярной оси.align-self: center; — элемент выравнивается по центру.align-self: baseline; — элемент выравнивается по базовой линии.align-self: stretch; — элемент растягивается, занимая все пространство по высоте.
align-content
Выравнивает содержимое внутри блока.
align-content: flex-start; — элементы выравниваются от начала главной оси.align-content: flex-end; — элементы выравниваются от конца главной оси.align-content: center; — элементы выравниваются по центру главной оси.align-content: space-between; — элементы выравниваются по главной оси, распределяя свободное место между собой.align-content: space-around; — элементы выравниваются по главной оси, распределяя свободное место вокруг себя.align-content: stretch; — элементы растягиваются, заполняя всю высоту (значение по умолчанию).
Возникла задача вывести 5 одинаковых адаптивных колонок на сайте с Bootstrap. Помогло это решение. У меня был Bootrstrap 4, но есть аналогичное решение и для 3 версии, там ещё проще. 5 колонок в Bootstrap 4 Добавляем данный код в файл Читать далее
Пример выпадающего многоуровневого меню с эффектом плавного появления. Меню работает как с использованием jQuery, так и на чистом CSS. При использовании меню на сайте все отлично работает даже с 3 уровнями вложенности. Подключаем библиотеку jQuery: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> HTML-код: <ul Читать далее
Flexbox - это новый, более эффективный способ выравнивания блоков в HTML вёрстке. Появление Flexbox, а точнее свойства display: flex; заметно облегчило жизнь многим веб-разработчикам, и сейчас применяется в фреймворке Bootstrap 4. Возможно поначалу кому-то будет сложно отойти от привычного float: Читать далее
Странно, но мало, где пишут об этой полезной библиотеке, поэтому исправляю эту ситуацию. Hover.css - это бесплатная коллекция CSS3-эффектов при наведении, применяемых к ссылкам, кнопкам, логотипам, SVG, изображениям и т. д. Легко применяется к элементам и доступна в CSS, Sass Читать далее
LESS - это расширение стандартного функционала CSS благодаря которому появилась возможность программировать обычные стили CSS. То есть использовать переменные, функции, условные операторы и многое другое. Начало работы Для того, чтобы ваш проект стал поддерживать LESS, необходимо скачать сам препроцессор, например Читать далее
Стоп-форма - это всплывающее окно, призывающее к действию, которое открывается через определенное время нахождения пользователя на странице или когда он пытается покинуть её. Чаще всего стоп-формы используются на Landing page. Стоп-форма по таймеру Рассмотрим пример вплывающего окна с формой на Читать далее
С появлением функции calc() стало возможным делать математические расчёты, такие как сложение, вычитание, умножение, деление прямо в CSS. Рассмотрим некоторые примеры её использования, которые могут пригодиться. Выравнивание по центру Наверное самый распространённый случай использования. Чтобы отцентрировать элемент, необходимо отступить 50% Читать далее
Добавить комментарий