Что такое flex css

Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице

CSS Flexbox — это технология для создания сложных гибких макетов за счёт правильного размещения элементов на странице. О самой технологии пишут здесь. Мы же решили объяснить возможности CSS Flexbox с использованием гифок.

Примечание Вы читаете улучшенную версию некогда выпущенной нами статьи.

display: flex

На ней размещено 4 div разных размеров, которые находятся внутри серого div . У каждого div есть свойство display: block . Поэтому каждый блок занимает всю ширину строки. Чтобы начать работать с CSS Flexbox, нужно сделать контейнер flex-контейнером. Делается это так:

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

flex-direction

У flex-контейнера есть две оси: главная и перпендикулярная ей.

CSS Flexbox: оси flex-контейнера

По умолчанию все предметы располагаются вдоль главной оси — слева направо. Именно поэтому блоки в предыдущем примере выстроились в линию, когда мы применили display: flex . А вот flex-direction позволяет вращать главную ось.

Обратите внимание, что flex-direction: column не выравнивает блоки по оси, перпендикулярной главной. Главная ось сама меняет своё расположение, и теперь направлена сверху вниз.

Есть ещё парочка свойств для flex-direction : row-reverse и column-reverse .

justify-content

Отвечает за выравнивание элементов по главной оси:

Justify-content может принимать 5 значений:

  1. flex-start
  2. flex-end
  3. center
  4. space-between
  5. space-around

Space-between задаёт одинаковое расстояние между блоками, но не между контейнером и блоками. Space-around также задаёт одинаковое расстояние между блоками, но теперь расстояние между контейнером и блоками равно половине расстояния между блоками.

align-items

Если justify-content работает с главной осью, то align-items работает с осью, перпендикулярной главной оси. Вернёмся к flex-direction: row и пройдёмся по командам align-items :

  1. flex-start
  2. flex-end
  3. center
  4. stretch
  5. baseline

Стоит заметить, что для align-items: stretch высота блоков должна быть равна auto . Для align-items: baseline теги параграфа убирать не нужно, иначе получится так:

Чтобы получше разобраться в том, как работают оси, объединим justify-content с align-items и посмотрим, как работает выравнивание по центру для двух свойств flex-direction :

align-self

Позволяет выравнивать элементы по отдельности:

Для двух блоков применим align-self , а для остальных — align-items: center и flex-direction: row .

flex-basis

Отвечает за изначальный размер элементов до того, как они будут изменены другими свойствами CSS Flexbox:

flex-basis влияет на размер элементов вдоль главной оси. Давайте посмотрим, что случится, если мы изменим направление главной оси:

Заметьте, что нам пришлось изменить и высоту элементов: flex-basis может определять как высоту элементов, так и их ширину в зависимости от направления оси.

flex-grow

Это свойство немного сложнее. Для начала зададим блокам одинаковую ширину в 120px:

flex-grow

По умолчанию значение flex-grow равно 0. Это значит, что блокам запрещено увеличиваться в размерах. Зададим flex-grow равным 1 для каждого блока:

CSS Flexbox: flex-grow

Теперь блоки заняли оставшееся место в контейнере. Но что значит flex-grow: 1 ? Попробуем сделать flex-grow равным 999:

И… ничего не произошло. Так получилось из-за того, что flex-grow принимает не абсолютные значения, а относительные. Это значит, что не важно, какое значение у flex-grow , важно, какое оно по отношению к другим блокам:

Вначале flex-grow каждого блока равен 1, в сумме получится 6. Значит, наш контейнер разделён на 6 частей. Каждый блок будет занимать 1/6 часть доступного пространства в контейнере. Когда flex-grow третьего блока становится равным 2, контейнер делится на 7 частей: 1 + 1 + 2 + 1 + 1 + 1. Теперь третий блок занимает 2/7 пространства, остальные — по 1/7. И так далее.

flex-grow работает только для главной оси, пока мы не изменим её направление.

flex-shrink

Прямая противоположность flex-grow . Определяет, насколько блоку можно уменьшиться в размере. flex-shrink используется, когда элементы не вмещаются в контейнер. Вы определяете, какие элементы должны уменьшиться в размерах, а какие — нет. По умолчанию значение flex-shrink для каждого блока равно 1. Это значит, что блоки будут сжиматься, когда контейнер будет уменьшаться.

Зададим flex-grow и flex-shrink равными 1:

Теперь поменяем значение flex-shrink для третьего блока на 0. Ему запретили сжиматься, поэтому его ширина останется равной 120px:

flex-shrink основывается на пропорциях. То есть, если у первого блока flex-shrink равен 6, а у остальных он равен 2, то, это значит, что первый блок будет сжиматься в три раза быстрее, чем остальные.

Заменяет flex-grow , flex-shrink и flex-basis . Значения по умолчанию: 0 (grow) 1 (shrink) auto (basis) .

Создадим два блока:

У обоих одинаковый flex-basis . Это значит, что оба будут шириной в 300px (ширина контейнера: 600px плюс margin и padding ). Но когда контейнер начнет увеличиваться в размерах, первый блок (с большим flex-grow ) будет увеличиваться в два раза быстрее, а второй блок (с наибольшим flex-shrink ) будет сжиматься в два раза быстрее:

Ещё больше возможностей свойства вы можете найти в анимированном руководстве по CSS flex​.

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

Как с CSS Flexbox меняется размер?

Когда увеличивается первый блок, он не становится в два раза больше второго, и когда уменьшается второй, он также не становится в два раза меньше первого. Это происходит из-за того, что flex-grow и flex-shrink отвечают за темп роста и сокращения.

Немного математики

Начальный размер контейнера: 640px. Вычтем по 20px с каждой стороны для padding , и у нас останется 600px для двух блоков. Когда ширина контейнера становится равной 430px (потеря в 210px), первый блок ( flex-shrink: 1 ) теряет 70px. Второй блок ( flex-shrink: 2 ) теряет 140px. Когда контейнер сжимается до 340px, мы теряем 300px. Первый блок теряет 100px, второй — 200px. То же самое происходит и с flex-grow .

Если вы также интересуетесь CSS Grid, можете ознакомиться с нашей статьёй, где мы рассматриваем Flexbox и Grid.

Что такое Flexbox? Описание всех css свойств, основные принципы, преимущества и недостатки.

article-main-image

Flexbox по праву можно назвать удачной попыткой решения огромного спектра проблем при построении лейаутов в css. Но прежде чем перейти к его описанию, давайте выясним, что же не так со способами верстки, которыми мы пользуемся сейчас?

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

Случилось так потому, что html и css развивались эволюционно. В начале веб-страницы были похожи на однопоточные текстовые документы, чуть позже разбиение страницы на блоки делали таблицами, затем стало модным верстать float-ами, а после официальной смерти ie6 добавились еще и приемы с inline-block. В итоге мы получили в наследство гремучую смесь всех этих приемов, используемую для построения лейаутов 99,9% всех существующих веб-страниц.

Спецификация CSS Flexible Box Layout Module (в народе Flexbox) призвана кардинально изменить ситуацию в лучшую сторону при решении огромного количества задач. Flexbox позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое.

Основные преимущества flexbox

  1. Все блоки очень легко делаются “резиновым”, что уже следует из названия “flex”. Элементы могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство.
  2. Выравнивание по вертикали и горизонтали, базовой линии текста работает шикарно.
  3. Расположение элементов в html не имеет решающего значения. Его можно поменять в CSS. Это особенно важно для некоторых аспектов responsive верстки.
  4. Элементы могут автоматически выстраиваться в несколько строк/столбцов, занимая все предоставленное место.
  5. Множество языков в мире используют написание справа налево rtl (right-to-left), в отличии от привычного нам ltr (left-to-right). Flexbox адаптирован для этого. В нем есть понятие начала и конца, а не права и лева. Т.е. в браузерах с локалью rtl все элементы будут автоматически расположены в реверсном порядке.
  6. Синтаксис CSS правил очень прост и осваивается довольно быстро.

Поддержка браузерами

Поддержка браузерами пока неполная (2014). Виноват в этом в основном Internet explorer, который поддерживает спецификацию 2011 года только начиная с 10 версии, . Не смотря на это, я бы порекомендовал обратить внимание на обширность поддержки всеми остальными мобильными и десктопными браузерами! Тут все прекрасно. Если Вам нужна мобильная версия сайта или web-based приложение, то его уже можно (а, возможно, и нужно) делать, используя все преимущества flexbox!

Немного истории

  • 2008 – CSS Working Group обсуждает предложение “Flexible Box Model” на основе XUL (XML User Interface Language – язык разметки в приложениях Mozilla) and XAML (Extensible Application Markup Language – язык разметки в приложениях Microsoft).
  • 2009 – опубликован черновик “Flexible Box Layout Module”. Chrome и Safari добавляет частичную поддержку, пока Mozilla начинает поддерживать XUL-подобный синтаксис, известный как “Flexbox 2009”.
  • 2011 – Tab Atkins берется за развитие Flexbox и публикует 2 черновика. В этих черновиках синтаксис изменен значительно. Chrome, Opera и IE 10 внедряют поддержку этого синтаксиса. Он известен под названием “flexbox 2011”
  • 2012 – Синтаксис снова немного изменен и уточнен. Спецификация переходит в статус Candidate Recommendation и известна под названием “flexbox 2012”. Opera внедряет беспрефиксную поддержку, Chrome поддерживает текущую спецификацию с префиксами, а Mozilla без них, IE10 добавляет поддержку устаревающего “flexbox 2011” синтаксиса.
  • 2014 – все новые браузеры поддерживают последнюю спецификацию (включая IE 11)

Мы будем рассматривать все примеры на основе новой спецификации. Если вам нужна поддержка старых Сhrome, FF и IE10, лучше использовать autoprefixer от Андрея Ситника, который автоматически добавит css правила и вендорные префиксы для устаревших спецификаций.

Начинаем погружение

Flexbox определяет набор CSS свойств для контейнера (flex-контейнер) и его дочерних элементов (flex-блоков). Первое, что нужно сделать – это указать контейнеру display:flex или display:inline-flex .

Основные свойства flex-контейнера. Главная и поперечная ось.

Одним из основных понятий в fleхbox являются оси.

  • Главной осью flex-контейнера является направление, в соответствии с которым располагаются все его дочерние элементы.
  • Поперечной осью называется направление, перпендикулярное главной оси.

Главная ось в ltr локали по умолчанию располагается слева направо. Поперечная – сверху вниз. Направление главной оси flex-контейнера можно задавать, используя базовое css свойство flex-direction .

flex-direction – направление главной оси

flexbox-main-columnflexbox-main-row

Доступные значения flex-direction:

  • row (значение по умолчанию) : слева направо (в rtl справа налево)
  • row-reverse : справа налево (в rtl слева направо)
  • column : сверху вниз
  • column-reverse : снизу вверх

justify-content – выравнивание по главной оси.

Css свойство justify-content определяет то, как будут выровнены элементы вдоль главной оси.

Доступные значения justify-content:

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

flex-justify-content

align-items – выравнивание по поперечной оси.

Css свойство align-items определяет то, как будут выровнены элементы вдоль поперечной оси.

Доступные значения align-items:

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

flex-align-items

СSS свойства flex-direction , justify-content , align-items должны применяться непосредственно к flex-контейнеру, а не к его дочерним элементам.

Демо основных свойств flex-контейнера

Оси и выравнивания по ним – это основы flex. Расслабьтесь, покликайте по демке и используйте ее, если нужно будет освежить в памяти.

Многострочная организация блоков внутри flex-контейнера.

flex-wrap

Все примеры, которые мы приводили выше, были построены с учетом однострочного (одностолбцового) расположения блоков. Надо сказать, что по умолчанию flex-контейнер всегда будет располагать блоки внутри себя в одну линию. Однако, спецификацией также поддерживается многострочный режим. За многострочность внутри flex-контейнера отвечает CSS свойство flex-wrap .

Доступные значения flex-wrap:

  • nowrap (значение по умолчанию) : блоки расположены в одну линию слева направо (в rtl справа налево)
  • wrap : блоки расположены в несколько горизонтальных рядов (если не помещаются в один ряд). Они следуют друг за другом слева направо (в rtl справа налево)
  • wrap-reverse : то-же что и wrap, но блоки располагаются в обратном порядке.

flex-flow – удобное сокращение для flex-direction + flex-wrap

По сути, flex-flow предоставляет возможность в одном свойстве описать направление главной и многострочность поперечной оси. По умолчанию flex-flow: row nowrap .

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

align-content

Существует также свойство align-content , которое определяет то, каким образом образовавшиеся ряды блоков будут выровнены по вертикали и как они поделят между собой все пространство flex-контейнера.

Важно: align-content работает только в многострочном режиме (т.е. в случае flex-wrap:wrap; или flex-wrap:wrap-reverse; )

Доступные значения align-content:

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

flex-align-content

СSS свойства flex-wrap и align-content должны применяться непосредственно к flex-контейнеру, а не к его дочерним элементам.

Демо свойств многострочности в flex

CSS правила для дочерних элементов flex-контейнера (flex-блоков)

flex-basis – базовый размер отдельно взятого flex-блока

Задает изначальный размер по главной оси для flex-блока до того, как к нему будут применены преобразования, основанные на других flex-факторах. Может быть задан в любых единицах измерения длинны ( px , em , % , …) или auto (по умолчанию). Если задан как auto – за основу берутся размеры блока (width, height), которые, в свою очередь, могут зависеть от размера контента, если не указанны явно.

flex-grow – “жадность” отдельно взятого flex-блока

Определяет то, на сколько отдельный flex-блок может быть больше соседних элементов, если это необходимо. flex-grow принимает безразмерное значение ( по умолчанию 0 )

Пример 1:

  • Если все flex-блоки внутри flex-контейнера имеют flex-grow:1 , то они будут одинакового размера
  • Если один из них имеет flex-grow:2 , то он будет в 2 раза больше, чем все остальные

Пример 2:

  • Если все flex-блоки внутри flex-контейнера имеют flex-grow:3 , то они будут одинакового размера
  • Если один из них имеет flex-grow:12 , то он будет в 4 раза больше, чем все остальные

Т.е абсолютное значение flex-grow не определяет точную ширину. Оно определяет его степень “жадности” по отношению к другим flex-блокам того же уровня.

flex-shrink – фактор “сжимаемости” отдельно взятого flex-блока

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

flex – короткая запись для свойств flex-grow, flex-shrink и flex-basis

flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

Демо для flex-grow, flex-shrink и flex-basis

align-self – выравнивание отдельно взятого flex-блока по поперечной оси.

Делает возможным переопределять свойство flex-контейнера align-items для отдельного flex-блока.

Доступные значения align-self (те же 5 вариантов, что и для align-items )

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

order – порядок следования отдельно взятого flex-блока внутри flex-контейнера.

По умолчанию все блоки будут следовать друг за другом в порядке, заданном в html. Однако этот порядок можно изменить с помощью свойства order . Оно задается целым числом и по умолчанию равно 0 .

Значение order не задает абсолютную позицию элемента в последовательности. Оно определяет вес позиции элемента.

В данном случае, блоки будут следовать один за другим вдоль главной оси в следующем порядке: item5, item1, item3, item4, item2

Демо для align-self и order

margin: auto по вертикали. Мечты сбываются!

Flexbox можно любить хотя бы за то, что привычное всем выравнивание по горизонтали через margin:auto здесь работает и для вертикали!

Вещи, которые следует помнить

  1. Не следует использовать flexbox там, где в этом нет необходимости.
  2. Определение регионов и изменение порядка контента во многих случаях все-таки полезно делать зависимым от структуры страницы. Продумывайте это.
  3. Разберитесь в flexbox и знайте его основы. Так намного легче достичь ожидаемого результата.
  4. Не забывайте про margin-ы. Они учитываются при установке выравнивания по осям. Также важно помнить, что margin-ы в flexbox не “коллапсятся”, как это происходит в обычном потоке.
  5. Значение float у flex-блоков не учитывается и не имеет значения. Это, наверно, как-то можно использовать для graceful degradation при переходе на flexbox.
  6. flexbox очень хорошо подходит для верстки веб-компонентов и отдельных частей веб-страниц, но показал себя не с лучшей стороны при верстке базовых макетов (расположение article, header, footer, navbar и т.п.). Это все еще спорный момент, но эта статья довольно убедительно показывает недостатки xanthir.com/blog/b4580

В заключение

Я думаю, что flexbox, конечно же, не вытеснит все остальные способы верстки, но, безусловно, в ближайшее время займет достойную нишу при решении огромного количества задач. И уж точно, пробовать работать с ним нужно уже сейчас. Одна из следующих статей будет посвящена конкретным примерам работы с flex-версткой. Подписывайтесь на новости 😉

Что такое Flex? — CSS: Основы Flex

В курсе по позиционированию рассматривался нормальный поток и возможные отклонения от него: плавающий поток, абсолютное и относительное позиционирование. Эти потоки построены на концепции блочных и строчных элементов. Так или иначе, все эти потоки управляли или изменяли именно эти элементы.

Концепция flex вводит новые потоки, с которыми производится работа. Взгляните на картинку ниже

Одним из главных нововведений стало полноценное использование осей x (main axis/главная ось) и y (cross axis/поперечная ось). Если работая по оси x разработчики располагали элементы достаточно легко, то полноценная работа по оси y стала важной особенностью, благодаря которой верстать сложные пользовательские интерфейсы стало намного проще. Теперь мы имеем возможность управлять расположением элемента сразу по всем осям и в любом направлении.

В концепции flex все элементы располагаются в специальных контейнерах, которые называются flex-container. Благодаря наличию контейнера браузер понимает, как обрабатывать элементы внутри него. Это немного похоже на вёрстку таблиц, где все элементы должны располагаться внутри элемента <table> .

Для того, чтобы создать флекс-контейнер, блоку устанавливается правило display: flex . Теперь этот элемент является контейнером, а все элементы внутри начинают располагаться по осям main и cross.

Обратите внимание, что теперь дочерние блоки выстроились по оси x. Чтобы показать, что это три разных блока, был добавлен отступ справа. Но так делать не стоит. Так получится дополнительный отступ справа у последнего элемента, который зачастую не нужен. Flex позволяет более гибко распоряжаться расстоянием между блоками и их шириной, что мы изучим в следующих уроках.

Обратите также внимание, что флекс-контейнер не является блочным или строчным элементом. Это означает, что некоторые знакомые вам правила перестанут работать внутри этого контейнера. Некоторыми из таких правил являются:

Что такое flexbox в CSS и зачем это нужно.

В этом видео давайте остановимся на таком удобном и полезном инструменте технологии CSS как Flexbox (флексбоксы).

Что это такое и зачем это нужно?

Наверняка, вы столкнетесь с этим, как только дойдете до вопроса позиционирования элементов на странице.

Начнем с того, что Flexbox — это сокращенная форма записи от (Flexible Box Layout Module) или модуль макета гибкого контейнера. Звучит несколько непонятно, но давайте будем разбираться.

Т.е. flexbox — это всего лишь один из модулей каскадных таблиц стилей CSS.

Для чего он может быть нужен?

Основная задача Flexbox — это позиционирование элементов.

Если вы видите какие-то элементы на веб-странице, которые размещаются в несколько колонок, можно воспользоваться несколькими способами, как это можно реализовать.

1) Можно воспользоваться свойством CSS Float.

2) Можно воспользоваться CSS свойством Position.

3) Либо мы можем воспользоваться Flexbox.

Flexbox — это продвинутый инструмент для позиционирования элементов на веб-странице. С его помощью вы получаете больше возможностей, чем вы бы имели пользуясь иными способами. Flexbox — это мощная альтернатива этим свойствам.

Какие есть недостатки использования стандартных методов верстки?

+ Свойства float и position очень плохо работают с высотой блоков. Довольно сложно добиться одинаковой высоты колонок, если в них находится разное количество содержимого.

Для решения этой задачи нужно прибегать к каким-то хитростям и "костыльным" решениям.

+ Выравнивание по вертикали.

Стандартные методы очень плохо работают с вертикальным позиционированием.

+ Стандартные методы для позиционирования элементов требуют добавления в исходный код дополнительных элементов разметки документа, которые не несут какой-либо смысловой нагрузки. Лишние свойства CSS вроде clear, которое требуется для работы свойства float.

Свойство float, в первую очередь, отвечает за обтекание элементов, а не за их позиционирование на веб-странице.

В случае использования Flexbox мы можем размещать блоки на веб-странице так, как нам это может быть нужно. В нормальном потоке у нас блоки идут один за другим сверху вниз (см. видео).

Если мы будем использовать Flexbox, мы можем развернуть этот нормальный поток так, как нам это будет нужно. Например, вбок слева направо. Можно развернуть расположение блоков справа налево или снизу вверх. Разворот возможен в любую сторону изменением значения всего одного свойства.

Кроме того, используя flexbox вы можете в пределах одной оси очень легко и гибко управлять положением всех элементов. Можно прижимать какие-то элементы к верху, к низу оси, а какие-то растянуть на всю высоту. Все это делается с помощью Flexbox очень просто.

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

По поводу поддержки Flexbox различными браузерами. Это можно проверить по этой ссылке:

Более 90% всех браузеров работает с Flexbox. Т.е. более 90% посетителей вашего сайта будут видеть вашу страницу так, как вы это и задумали.

Flexbox все больше и больше набирает популярность и со временем они должны полностью вытеснить все старые методы верстки веб-страниц.

Вот такое вводное видео. Надеюсь вам стало понятнее, что это за технология и для чего это нужно.

Основа Flexbox. Оси. Теория.

Давайте начнем с самых основ. С самых базовых понятий модуля Flexbox и начнем мы с такого понятия как оси.

Модуль Flexbox приносит нам новый подход к позиционированию элементов, который принципиально отличается от классических методов позиционирования.

В Flexbox позиционирование элементов основывается на позиционировании элементов относительно двух осей.

Что же это за 2 оси?

Оси — это просто обычные оси координат, такие как ось X и ось Y. Относительно которых будут располагаться элементы на веб-странице.

Используя модуль Flexbox, вы как бы насиживаете элементы, которые будут располагаться на веб-странице, на эти оси. Вы говорите, как будут располагаться эти элементы относительно этих осей по горизонтали и вертикали.

И самое главное в том, что Flexbox позволяет нам менять направление этой оси. Мы можем сделать так, чтобы эта ось была направлена вправо, влево, вверх и вниз. В зависимости от направления оси и будут располагаться элементы на веб-странице.

Та ось, которая определяет направление элементов называется главной осью, а оставшаяся ось называется вспомогательной осью.

Главную ось Flexbox можно примерно сравнить с шампуром, на который нанизывается какая-то еда.

Элементы этой еды — это есть те элементы, которые мы будем располагать на веб-странице, а сама ось, ее можно сравнить с шампуром. Примерно такую аналогию для понимания можно привести.

Теперь переходим к конкретным свойствам и самое главное свойство, с помощью которого для элемента можно, включить режим позиционирования блоков Flexbox — это свойство:

Как только элемент на веб-странице получает свойство display: flex для него включается режим флексбоксов и все элементы, которые располагаются у него внутри будут как бы нанизываться на так называемый шампур (на главную ось).

У элемента, благодаря этому значению flex появляется виртуальная ось, она на веб-странице невидима, но эта ось появляется и на нее начинают нанизываться все дочерние элементы, которые располагаются внутри этого блока.

Наверняка, вы уже знаете, что есть блочные элементы, которые имеют значение display:block, есть строчные элементы, которые имеют значение display: inline и теперь, благодаря модулю Flexbox в CSS появился новый вид элементов, которых называется flex, который и позволяет нам очень гибко позиционировать элементы на веб-странице.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *