Верстка на flexbox.

Оцените материал
(1 Голосовать)

Здравствуйте! Сегодня в продолжении темы верстки страницы я хотел бы рассказать о FlexBox. Модуль Flexbox-верстки (flexible box - «гибкий блок», на данный момент W3C Candidate Recommendation) ставит задачу предложить более эффективный способ верстки, выравнивания и распределения свободного места между элементами в контейнере, даже когда их размер неизвестен и / или динамический (отсюда слово «гибкий»).
Главная задумка flex-верстки в наделении контейнера способностью изменять ширину / высоту (и порядок) своих элементов для лучшего заполнения пространства (в большинстве случаев - для поддержки всех видов дисплеев и размеров экранов). Flex-контейнер растягивает элементы для заполнения свободного места или сжимает их, чтобы предотвратить выход за границы.
Самое важное, flexbox-верстка не зависит от направления в отличие от обычных лейаутов (блоки, располагаются вертикально, и инлайн-элементы, расположенные горизонтально). В то время, как обычный лэйаута отлично подходит для веб-страниц, ему не хватает гибкости для поддержки крупных или сложных приложений (особенно когда дело доходит до изменения ориентации экрана, изменения размера, растяжения, сжатия и т.п.).

Т.к. flexbox - это целый модуль, а не просто единичное свойство, он объединяет в себе множество свойств. Некоторые из них должны применяться к контейнеру (родительского элемента, так называемом flex-контейнера), в то время как другие свойства применяются к дочерним элементам, или flex-элементам.

 

Если обычный макет основывается на направлениях потоков блочных и инлайн-элементов, то flex-макет основывается на «направлениях flex-потока». 

 Flexbox

В основном элементы будут распределяться или вдоль главной оси (от main-start в main-end), или вдоль поперечной оси (от cross-start в cross-end).

    main-axis - главная ось, вдоль которого располагаются flex-элементы. Обратите внимание, она обязательно должна быть горизонтальной, все зависит от качества justify-content.
    
main-start | main-end - flex-элементы размещаются в контейнере от позиции main-start позиции main-end.
    
main size - ширина или высота flex-элемента в зависимости от выбранной основной величины. Основная величина может быть либо шириной, или высотой элемента.
    
cross axis - поперечная ось, перпендикулярная главной. Ее направление зависит о тнаправления главной оси.
    
cross-start | cross-end - flex-строки заполняются элементами и размещаются в контейнере от позиции cross-start и позиции cross-end.
    
cross size - ширина или высота flex-элемента в зависимости от выбранной размерности равна этой величине. Это свойство совпадает с width или height элемента в зависимости от выбранной размерности.


Свойства
display: flex | inline-flex;

Применяется до родительского элемента flex-контейнера.

Определяет flex-контейнер (инлайновий или блочный зависимости от выбранного значения), подключает flex-контекст для всех его непосредственных потомков.

display: other values ​​| flex | inline-flex;

Имейте в виду:

    CSS-столбце columns не работают с flex-контейнером float, clear и vertical-align не работают с flex-элементами

flex-direction

Применяется до родительского элемента flex-контейнера.

Устанавливает главную ось main-axis, определяя тем самым направление для flex-элементов, размещаемых в контейнере.

flex-direction: row | row-reverse | column | column-reverse

    row (по умолчанию): слева направо для ltr, справа налево для rtl;
    
row-reverse: справа налево для ltr, слева направо для rtl;
    
column: аналогично row, сверху вниз;
    
column-reverse: аналогично row-reverse, снизу вверх.

flex-wrap

Применяется до родительского элемента flex-контейнера.

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

flex-wrap: nowrap | wrap | wrap-reverse

    nowrap (по умолчанию): однострочный / слева направо для ltr, справа налево для rtl;
    
wrap: многострочный / слева направо для ltr, справа налево для rtl;
    
wrap-reverse: многострочный / справа налево для ltr, слева направо для rtl.

flex-flow

Применяется до родительского элемента flex-контейнера.

Это сокращение для свойств flex-direction и flex-wrap, вместе определяют главную и поперечную оси. По умолчанию принимает значение row nowrap.

flex-flow < 'flex-direction'> || < 'Flex-wrap'>

justify-content

Применяется до родительского элемента flex-контейнера.

Определяет выравнивание относительно главной оси. Помогает распределить свободное место в случае, когда элементы строки не «тянутся», или тянутся, но уже достигли своего максимального размера. Также позволяет в некотором роде управлять выравниванием элементов при выходе за пределы строки.

justify-content: flex-start | flex-end | center | space-between | space-around

    flex-start (по умолчанию): элементы сдвигаются к началу строки;
    
flex-end: элементы сдвигаются до конца строки;
    
center: элементы выравниваются на середину строки;
    
space-between: элементы распределяются равномерно (первый элемент в начале строки, последний - в конце)
    
space-around: элементы распределяются равномерно с равным расстоянием между собой и вне строки.

justify-content
align-items

Применяется до родительского элемента flex-контейнера.

Определяет поведение по умолчанию для того, как flex-элементы располагаются относительно поперечной оси на текущей строке. Считайте это версии justify-content для поперечной оси (перпендикулярной к основной).

align-items: flex-start | flex-end | center | baseline | stretch

    flex-start: граница cross-start для элементов расположен позиции cross-start;
    
flex-end: граница cross-end для элементов расположен позиции cross-end;
    
center: элементы выравниваются по центру поперечной оси;
    
baseline: элементы выравниваются по своей базовой линии;
    
stretch (по умолчанию): элементы растягиваютcя, заполняя контейнер (с учетом min-width / max-width).

 
align-items
align-content

Применяется до родительского элемента flex-контейнера. Выравнивает строки flex-контейнера при наличии свободного места на поперечной оси аналогично тому, как это делает justify-content на главной оси. Примечание: это свойство не работает с однострочными flexbox.
 

align-content: flex-start | flex-end | center | space-between | space-around | stretch

    flex-start: строки выравниваются относительно начала контейнера;
    
flex-end: строки выравниваются относительно конца контейнера;
    
center: строки выравниваются по центру контейнера;
    
space-between: строки распределяются равномерно (первая строка в начале строки, последняя - в конце)
    
space-around: строки распределяются равномерно с равным расстоянием между собой;
    
stretch (по умолчанию): строки растягиваются, заполняя свободное пространство.

align-content
order

Применяется до дочернему элементу / flex-элемента.

По умолчанию flex-элементы располагаются в исходном порядке. Тем не менее, свойство order может управлять порядком их расположения в контейнере.
 
order 1

flex-grow

Применяется до дочернему элементу / flex-элемента. Определяет для flex-элемента возможность «расти» при необходимости. Принимает безразмерное значение, служит в качестве пропорции. Оно определяет, какую долю свободного места внутри контейнера элемент может занять. Если во всех элементов свойство flex-grow задано как 1, то каждый потомок получит внутри контейнера одинаковый размер. Если вы задали одному из потомков значение 2, то он займет в два раза больше места, чем другие.

flex-grow <number> (по умолчанию 0)

Отрицательные числа не принимаются.
flex-shrink

Применяется до дочернему элементу / flex-элемента.

Определяет для flex-элемента возможность сжиматься при необходимости.

flex-shrink <number> (default 1)

Отрицательные числа не принимаются.
flex-basis

Применяется до дочернему элементу / flex-элемента. Определяет размер по умолчанию для элемента перед распределением пространства в контейнере.

flex-basis <length> | auto (default auto)

flex

Применяется до дочернему элементу / flex-элемента. Это сокращение для flex-grow, flex-shrink и flex-basis. Второй и третий параметры (flex-shrink, flex-basis) необязательны. Значение по умолчанию - 0 1 auto.

flex: none | [< 'Flex-grow "> <" flex-shrink'>? || < 'Flex-basis'>]

align-self

Применяется до дочернему элементу / flex-элемента. Позволяет переопределить выравнивания, заданный по умолчанию или в align-items, для отдельных flex-элементов. Обратитесь к описанию свойства align-items для лучшего понимания доступных значений.

align-self: auto | flex-start | flex-end | center | baseline | stretch


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

.parent {
  display: flex;
  height: 300px; 
}
.child {
  width: 100px; / * Або що завгодно * /
  height: 100px; / * Або що завгодно * /
  margin: auto; / * Магія! * /
}

Этот пример основывается на том, что margin под flex-контейнере, заданный как auto, поглощает лишнее пространство, поэтому задача отступления таким образом выровняет элемент ровно по центру по обеим осям.Теперь давайте используем какие-то свойства. Представьте набор из 6 элементов фиксированного размера (для красоты), но с возможностью изменения размера контейнера. Мы хотим равномерно распределить их по горизонтали, чтобы при изменении размера окна браузера все выглядело хорошо (без @media-запросов!).

.flex-container {
  
/ * Сначала создадим flex-контекст * /
  
display: flex;

  / * Теперь определим направление потока и хотим ли мы, чтобы элементы
  
переносились на новую строку
   
* Помните, что это тоже самое, что и:
   
* Flex-direction: row;
   
* Flex-wrap: wrap;
   
* /
  
flex-flow: row wrap;

  / * Теперь определим, как будет распределяться пространство * /
  
justify-content: space-around;
}

Готово. Все остальное - уже дело оформления. Давайте попробуем что-нибудь еще. Представьте, что нам нужна выровнена по правому краю навигация в самом верху нашего сайта, но мы хотим, чтобы она выравнивалась по центру для экранов среднего размера и превращалась в один столбец на маленьких. Все достаточно просто.

/ * Большие экраны * /
.navigation {
  
display: flex;
  
flex-flow: row wrap;
  
/ * Сдвигает элементы к концу строки по главной оси * /
  
justify-content: flex-end;
}

/ * Экраны среднего размера * /
media all and (max-width: 800px) {
  
.navigation {
    
/ * Для экранов среднего размера мы выравниваем навигацию по центру,
    
равномерно распредляя свободное место между элементами * /
    
justify-content: space-around;
  
}
}

/ * Маленькие экраны * /
media all and (max-width: 500px) {
  
.navigation {
    
/ * На маленьких экранах вместо строки мы располагаем элементы в столбце * /
    
flex-direction: column;
  
}
}

Давайте поиграем с гибкостью flex-элементов! Как насчет ориентированного на мобильные устройства трёхколоночного макета с полноширинной шапкой и подвалом? И другим порядком расположения.

.wrapper {
  
display: flex;
  
flex-flow: row wrap;
}

/ * Задаем всем Элеметы ширину в 100% * /
.header, .main, .nav, .aside, .footer {
  
flex 1100%;
}

/ * В этом случае мы полагаемся на исходный порядок для ориентации на
 
* Мобильные устройства:
 
* 1 header
 
* 2 nav
 
* 3 main
 
* 4 aside
 
* 5 footer
 
* /

/ * Экраны среднего размера * /
media all and (min-width: 600px) {
  
/ * Оба сайдбара располагаются в одной строке * /
  
.aside {flex: 1 auto; }
}

/ * Большие экраны * /
media all and (min-width: 800px) {
  
/ * Мы меняем местами элементы .aside-1 и .main, а также сообщаем
   
* Элемента .main забирать в два раза больше места, чем сайдбаре.
   
* /
  
.main {flex 2 0px; }

  .aside-1 {order: 1; }
  
.main {order: 2; }
  
.aside-2 {order: 3; }
  
.footer {order: 4; }

Прочитано 2580 раз Последнее изменение Четверг, 29 декабря 2016 19:08
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

geekbrains.ru/

Поиск по сайту

Google+