-
Автор темы
- #1
Предисловие:
Небольшая статья для пользователей форума, в которой вы можете ознакомиться с модулем Flexbox и посмотреть примеры его использования. Данная часть - первая. Если такая тематика зайдет пользователям - я продолжу.
Вступление:
Flexbox - способ расстановки элементов внутри контейнера. (от англ. "flexible" - гибкий) Данное свойство может применяться независимо от размеров того, или иного элемента. Данный метод расстановки элементов часто используется при адаптивной верстке сайтов, так как это позволяет максимально эффективно распределять элементы в соответствующем контейнере.
Свойства элементов:
1. display (display: flex;)
Данное свойство задается родительскому контейнеру, оно создает непосредственно flex контейнер.
2. flex-direction (flex-direction: column / row / row-reverse / column-reverse;)
Данное свойство задает направление выстроения блоков внутри контейнера, оно также задается родительскому контейнеру
3. flex-wrap ( flex-wrap: wrap / nowrap / wrap-reverse; )
Данное свойство задается родитеському контейнеру. Изначально, все контейнеры будут умещаться в одной строке, не перебрасываясь на новые. С помощью данного свойства, вы можете перекидывть айтемы на новую строчку. Тут все также, wrap - переброс элементов на новую строку, wrap-reverse - переброс на новую строку, но снизу вверх, nowrap (деф.) - запрет переброса.
4. flex-flow (flex-flow: flex-direction || flex-wrap)
Данное свойство задается родитеському контейнеру. Оно просто содержит в себе два вышеуказанных свойства, ничего более.
5. justify-content ( justify-content: flex-start / flex-end / center / space-between / space-around / space-evenly; )
Данное свойство задается родительскому контейнеру. Оно определяет, как будут выставлены блоки по оси X (горизонтально)
6. align-items ( align-items: stretch / flex-start / flex-end / center / baseline; )
Данное свойство задается родительскому контейнеру. Оно определяет, как будут выставлены блоки по оси Y (вертикально)
Данных свойств хватает для понимания того, что же такое flexbox и как он работает. Но, все же, это всего лишь небольшая часть от всего flexbox-а. Еще раз повторюсь, если зайдет - продолжу.
Небольшая статья для пользователей форума, в которой вы можете ознакомиться с модулем Flexbox и посмотреть примеры его использования. Данная часть - первая. Если такая тематика зайдет пользователям - я продолжу.
Вступление:
Flexbox - способ расстановки элементов внутри контейнера. (от англ. "flexible" - гибкий) Данное свойство может применяться независимо от размеров того, или иного элемента. Данный метод расстановки элементов часто используется при адаптивной верстке сайтов, так как это позволяет максимально эффективно распределять элементы в соответствующем контейнере.
Свойства элементов:
1. display (display: flex;)
Данное свойство задается родительскому контейнеру, оно создает непосредственно flex контейнер.
2. flex-direction (flex-direction: column / row / row-reverse / column-reverse;)
Данное свойство задает направление выстроения блоков внутри контейнера, оно также задается родительскому контейнеру
3. flex-wrap ( flex-wrap: wrap / nowrap / wrap-reverse; )
Данное свойство задается родитеському контейнеру. Изначально, все контейнеры будут умещаться в одной строке, не перебрасываясь на новые. С помощью данного свойства, вы можете перекидывть айтемы на новую строчку. Тут все также, wrap - переброс элементов на новую строку, wrap-reverse - переброс на новую строку, но снизу вверх, nowrap (деф.) - запрет переброса.
4. flex-flow (flex-flow: flex-direction || flex-wrap)
Данное свойство задается родитеському контейнеру. Оно просто содержит в себе два вышеуказанных свойства, ничего более.
5. justify-content ( justify-content: flex-start / flex-end / center / space-between / space-around / space-evenly; )
Данное свойство задается родительскому контейнеру. Оно определяет, как будут выставлены блоки по оси X (горизонтально)
6. align-items ( align-items: stretch / flex-start / flex-end / center / baseline; )
Пожалуйста, авторизуйтесь для просмотра ссылки.
Данное свойство задается родительскому контейнеру. Оно определяет, как будут выставлены блоки по оси Y (вертикально)
Данных свойств хватает для понимания того, что же такое flexbox и как он работает. Но, все же, это всего лишь небольшая часть от всего flexbox-а. Еще раз повторюсь, если зайдет - продолжу.