Что такое 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.

HTML

<div class="my-flex-container">
  <div class="my-flex-block">item1</div>
  <div class="my-flex-block">item2</div>
  <div class="my-flex-block">item3</div>
</div>

CSS

.my-flex-container{
  display: 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. Расслабьтесь, покликайте по демке и используйте ее, если нужно будет освежить в памяти.

flexbox demo

Многострочная организация блоков внутри 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’>

CSS

/* т.е. ... */

.my-flex-block{
  flex-direcrion:column;
  flex-wrap: wrap;
}

/* это то же самое, что ... */

.my-flex-block{
  flex-flow: column 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

flexbox demo

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'> ]

CSS

/* т.е. ... */

.my-flex-block{
  flex-grow:12;
  flex-shrink:3;
  flex basis: 30em;
}

/* это то же самое, что ... */

.my-flex-block{
  flex: 12 3 30em;
}

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

flexbox demo

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 не задает абсолютную позицию элемента в последовательности. Оно определяет вес позиции элемента.

HTML

<div class="my-flex-container">
  <div class="my-flex-block" style="order: 5" >item1</div>
  <div class="my-flex-block" style="order: 10">item2</div>
  <div class="my-flex-block" style="order: 5" >item3</div>
  <div class="my-flex-block" style="order: 5" >item4</div>
  <div class="my-flex-block" style="order: 0" >item5</div>
</div>

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

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

flexbox demo

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

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

.my-flex-container {
  display: flex;
  height: 300px; /* Или что угодно */
}

.my-flex-block {
  width: 100px;  /* Или что угодно */
  height: 100px; /* Или что угодно */
  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-версткой. Подписывайтесь на новости ;)

Tagged with: , , ,
64 comments on “Что такое Flexbox? Описание всех css свойств, основные принципы, преимущества и недостатки.
  1. lolmaus пишет:

    Firefox до сих пор не поддерживает свежую спецификацию FlexBox. Поддержка свежей спецификации имеется в версии 28, которая на данный момент (февраль 2014) является бетой.

  2. просмотрел по приведенной ссылке претензии к флексбоксу.
    как-то не получается всерьез воспринять материал на том сайте, увидев как там «сверстан» блок комментариев :) — http://take.ms/di8sV

  3. Anton пишет:

    В IE 11 не работает полноценно flexbox!

  4. Роман Иванов пишет:

    Спасибо, замечательная статья!
    Насчет неудобства использования flexbox для разметки макета страницы, я с автором не согласен.
    По приведенной ссылке утверждается, что получаемая вложенность элементов слишком сложна.
    На мой взгляд она понятна и логична. Рекомендуемая же спецификация Template Layout только черновик.

  5. NeedHate пишет:

    Ребята, как быть с safari. Он ни в какую не хочет делать wrap. Просто сжимает/расширяет элементы внутри flex-box. Но с переносами (разрывами) совсем туго. Есть ли какие-либо триксы “починить” это?

  6. Татьяна пишет:

    Спасибо большое! Больше всего порадовали движки, позволяющие видеть эффект от выбора тех или иных свойств.

    Не нашла способа отправить орфопед: Описание всех css свойств, основные принципы, прЕимущества и недостатки.

  7. starper пишет:

    Отличная статья, открыла мне глаза на flexbox :) До свиданья, float при верстке колонок, меню и т.п.!
    Насчет кроссбраузерности даже верится с трудом: неужто наступило прекрасное будущее!?
    Спасибо за приличную порцию позитива.

  8. Zergio пишет:

    “Это все еще спорный момент, но эта статья довольно убедительно показывает недостатки …”

    Тогда уж стоит и уточнять, что оригинальная статья датируется апрелем 2010 года. По крайней мере отделяясь 4 годами от текущего материала.

  9. Рома с Аэродрома пишет:

    Ребят, мне до сих пор ссыкотно пользовать border box, ибо верстка развалится, а вы тут такие смелые буржуазные концепции двигаете. Согласен, всё-это круто и удобно, но в вакансиях front end разрабов просят поддержку ie7, а flexbox поддерживает IE10+. И тут у юнной(два "н" или одно?) мыслящей интеллигенции возникает актуальный вопрос: "А на**уй(вместе или раздельно?) оно надо?".

    • Мы часто пишем мобильные веб-приложения.
      Там вообще не нужен IE.
      Я знаю очень много разработчиков, у которых на проектах IE10+ для довольно больших веб-проектов.

      У нас в компании 90% продуктов тестируются начиная с IE 10+.

      Через 2 года все забудут про ie7, а ты будешь не в теме.
      Это к вопросу “А на**уй(вместе или раздельно?) оно надо?” Как-то так..

    • Тимур пишет:

      Сочувствую тебе чел, если в твоей конторе требуют поддержку ИЕ7. Очень сочувствую. Лучше увольняйся (или не устраивайся). Для уверенности посмотри статистику использования браузеров, сейчас мастдайными браузерами пользуются не более 1%. Платежеспособные люди, т.е. аудитория, интересующая производителей веб-проектов, по любому могут себе позволить современную ОС (даже винХР!) и интернет, и МОГУТ скачать последний браузер, у которого на борту будут поддерживаться все последние новшества веб-разработки. Если кто-то до сих пор сидит на ИЕ6, это уже ихние личные проблемы (может это фетиш у них или любители олдскула), вот они пусть не жалуются. А таких работодателей, которые оттягивают прогресс, заставляя поддерживать старье, нужно гнать сс*ными тряпками!
      p.s. юной (с одной н), на**уй (вместе).

  10. Ramzes пишет:

    Одна из лучших статей по веб-технологиям которые вообще когда то видел. Все четко и понятно разжевано, супер!

  11. Михаил пишет:

    Статья замечательная, спасибо ;) Согласен, что пробовать нужно уже сегодня — завтра это будет везде.

    На счет применять в реальных проектах сегодня — однозначное нет.

    Если с мобильниками всё хорошо и круто, то на mac os mavericks всё печально, потому что штатный safari совсем не понимает flexbox, другое дело mac os yosemity — там всё ок, но когда это все перейдут на новую ось (сам сижу на старой)

    • Татьяна пишет:

      Ничего подобного! Я это использую, и работает аж бегом. Занимаюсь фронтендом для Salesforce. В моем случае – это просто спасение. Хотя я разбиралась с этой темой немного ранее, но статья очень хорошо построена, пробежалась по ней с удовольствием. Спасибо автору.

  12. Константин пишет:

    Отличная статья, именно такую хочешь найти, когда пишешь запрос в гугле. :)

  13. Дмитрий пишет:

    Привет! Весь день искал инфу по этой магии флексбоксам, пугает что ie не полная поддержка судя caniuse, но как я понял статья годичной давности, может уже что то стало лучше? Можно использовать в продакшн эту магию?
    Спасибо.

  14. Igor пишет:

    Статья действительно хорошая +

    Но вот я открыл пример в ИЕ 10 – он абсолютно не работает, хотя везде пишут о поддержке ИЕ10+
    Это первый вопрос

    А второй. У меня на проекте сейчас задача – сделать респонсив сайт, используя bourbon + neat в качестве grid фреймворка. Так вот, все примеры по этому фреймоврку, используют сетку основанную на флоатах( в терминах самого фреймворка span-columns кто в курсе).
    Хотя там и есть поддержка flexbox, но почемуто она там, судя по всему, для сетки не используется. Это моя первая именно респонсив верстка, поэтому прошу прощения, за возможно глупый вопрос, однако ответа в интернете я так и не нашел.

    Отсюда возникает вопрос: есть ли какието недостатки использования flexbox по сравнению с обычными флоатами для респонсив сайта (поддержка ИЕ10+ и мобильных)? Интересует вопрос впринципе, и если кто вкурсе, в рамках данных фреймворков

    • Igor пишет:

      например, смотрю сайт другого цсс фрейморка – бутстрапа. Тмм тоже все на флоатах. Вероятно изза того, что есть какието недостатки с флексбоксом?

      • Добрый день,
        по поводу IE10, посмотрите пожалуйста этот абзац:

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

        А по поводу бутстрапа: он был написан еще задолго до того как о флексбоксе вообще что-то заговорили :)

      • Дмитрий пишет:

        Ну вот прошло время, и сейчас я пришёл читать эту статью потому что вижу, что bootstrap 4, который уже в alfa-5 версии (то есть скоро редизнется, надеюсь) уже поставляется в версии flex и float

  15. Андрей пишет:

    Дмитрий, сайт caniuse.com не работает ((

    Проблема такая: запилил себе мобильную версию сайта vegglife.ru, руководствуясь ее видом в свежескачанной Опера мини. Там выглядит все нормально (шапка, основной текст, ссылки). При проверке в
    PageSpeed Insights и google.com/webmasters/tools/mobile-friendly/ выяснилось, что мобильная версия сайта выглядит совсем иначе. Ощущение, что flex и order там вообще не работают. Почему и что делать?

    • Андрей пишет:

      После дополнительных тестов выяснил, что старые мобильные браузеры действительно не понимают flex. Переделал у себя с помощью абсолютного позиционирования.

      • Андрей пишет:

        Удалось исправить ошибку flex со старыми браузерами. Надо просто добавлять код для старых браузеров:

        .page-wrap {
        display: -webkit-box; /* OLD – iOS 6-, Safari 3.1-6 /
        display: -moz-box; /
        OLD – Firefox 19- (buggy but mostly works) /
        display: -ms-flexbox; /
        TWEENER – IE 10 /
        display: -webkit-flex; /
        NEW – Chrome /
        display: flex; /
        NEW, Spec – Opera 12.1, Firefox 20+ /
        }
        .main-content {
        -webkit-box-ordinal-group: 1; /
        OLD – iOS 6-, Safari 3.1-6 /
        -moz-box-ordinal-group: 1; /
        OLD – Firefox 19- /
        -ms-flex-order: 1; /
        TWEENER – IE 10 /
        -webkit-order: 1; /
        NEW – Chrome /
        order: 1; /
        NEW, Spec – Opera 12.1, Firefox 20+ */
        }
        и т.д. Проверял – работает везде, где не работало в моем первом комментарии.
        Нашел тут (англ.) – https://css-tricks.com/using-flexbox/

        • Андрей пишет:

          Долго искал работающие правила для старых браузеров, не поддерживающих flex-direction:column

          display:-moz-box;
          display:-ms-box;
          display:-webkit-box;
          display:box;
          -webkit-box-orient:vertical;
          /current syntax/
          display:-moz-flex;
          display:-ms-flex;
          display:-webkit-flex;
          display:flex;
          -moz-flex-direction:column;
          -ms-flex-direction:column;
          -webkit-flex-direction:column;
          flex-direction:column;

          Отсюда – http://lists.w3.org/Archives/Public/www-style/2013Apr/0037.html

  16. Dmitry пишет:

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

  17. Евгений пишет:

    Спасибо автору!!!!
    Жить стало немного легче а порой и на много)

  18. Евгений пишет:

    Вопрос по поводу “Не следует использовать flexbox там, где в этом нет необходимости”.
    А что за причина? И как определить, где есть необходимость, а где нет? Или на Июль 2015-го года это уже неактуально и флекс уже можно использовать везде и смело?

  19. Марат пишет:

    Здравствуйте! Вопрос от чайника, может вы сможете помочь.

    Как сделать вывод двух этих картинок в центре при любых разрешениях монитора?

    А то в одном разрешении картинки ровно по центру, а при других разрешениях разьежаются…

    http://jsfiddle.net/pa5y9f4g/

    Спасибо!

  20. Алексей пишет:

    Отличная статья! Спасибо большое!
    Уже много смотрел в интернете на тему, эта первая статья, где не просто перечисляются спецификации, и даётся иллюстрация, а где в подробностях рассказано и показано как то или иное свойства РАБОТАЕТ. И это замечательно, спасибо!
    Единственное, возможно было бы не плохо указать что align-content по своим свойствам аналогичен с justify-content, но применяется для другого.
    И, если честно не совсем понятен пример со свойством flex, а именно как сочетается свойство flex-basis с двумя другими свойствами определяющими возможное масштабирование.
    Не могли бы пояснить как одно влияет на другое на примерах?
    Ещё раз благодарю!

  21. Руслан пишет:

    /* т.е. … */

    .my-flex-block{

    flex-grow:12;

    flex-shrink:3;

    flex basis: 30em;

    }

    /* это то же самое, что … */

    .my-flex-block{

    flex: 12 3 30em;

    }

    а разве эти свойства прописываются не для контейнера?

    • Руслан пишет:

      Пардон, не то выделил. Вот это:

      .my-flex-block{
      flex-direcrion:column;
      flex-wrap: wrap;
      }

      /* это то же самое, что … */

      .my-flex-block{
      flex-flow: column wrap;
      }

  22. Алексей пишет:

    А если мне нужно, первый элемент “пригвоздить” к началу блока, а остальные элементы сделать по принципу flex-end, то можно это как-то сделать без дополнительного контейнера?

  23. Алексей пишет:

    Что-то вроде align-self, только для главной оси…

  24. Алексей пишет:

    display: inline-flex – кстати, вот про это, в статье, почему-то не написано…

  25. Глобик пишет:

    Я б не советовал использовать флекс с автопрефиксами. Потому что много юзеров со старыми браузерами сафари и опера мини, которые лишь частично поддерживают те или иные характеристики флексбокса. Что и автопрефексы могут покорявить верстку. Проще сделать верстку колонок по-старому, как есть. А уже только потом для тех браузеров, что нативно поддерживают флексбокс добавить допкласс к корню документа и использовать его, как стиль к флексбоксам.

  26. Марго пишет:

    Я дико извиняюсь, но нет такого слова “координально”. Есть “кардинально” или “координаты”. Извините, что не по теме

  27. Igor пишет:

    Круто. Иногда использую как шпаргалку)

  28. SuperGera пишет:

    Обалденная статья.
    Спасибо!

  29. Maxim Borodin пишет:

    Сделайте свойства по умолчанию жирными в демо.
    Спасибо!

  30. pocoZ пишет:

    FLEXBOX в Internet Explorer 11
    Надо добавить, на сегодняшний день, если не указать ширину блока(min-width; max-width либо width), в котором используется свойство flexbox, дочерние элементы могут некорректно отображаться.

  31. Алексей пишет:

    Прикольно! Благодарю!

  32. D0kX пишет:

    Пробую использовать flex разметку и сразу затык: Хочу прижать футер к низу экрана/body, делаю body контейнером с функцией пространство между блоками. Далее в один блок помещаю шапку и тело страницы, ниже блок с футером. Вроде бы все должно быть ок, но вот незадача, у меня в браузере стоит расширение, которое при переходе на страницу дописывает в body свой скрытый div, и тут же верстка едет, так как футер перемещается на середину страницы. И это ни как пока не могу обойти, как быть? Ведь разных расширений у пользователей может быть много, и каждый может ломать верстку сайта.

    • D0kX пишет:

      Из вариантов решил пока добавить к футеру orderBy:99

      • Станислав пишет:

        Моя CMS помещает куски кода в спец блоки в режиме редактирования.
        Пока решаю это назначением спец-блокам тех же flex свойств, что и первому.
        Обычно эти блоки становятся между контейнером и потомками.

  33. Александр пишет:

    Шикарная статья с классными наглядными примерами. Премного благодарен! :)

  34. Поцык пишет:

    Лучшая статья о flexbox. Спасибо!

  35. Алексей пишет:

    Лучшая статья по флекс-боксу.

    В итогах написано, что флексбокс не заменит способы вёрстки, однако создавать структуру сайта надо теперь только на флексбокс (для поддержки адаптивности). И наконец избавляться от глючного float.

    Спасибо за статью!

  36. Владислав пишет:

    IE как религия, тормозит прогресс.

  37. Russel пишет:

    Неприятная особенность – не выдерживаются пропорции блоков(div) при наполнении контента. Хотел использовать flexbox для пропорциональной разбивки экрана без использования процентов. Для примера, если разбить экран на две части в соотношении 1:3 то пропорции блоков немного изменяются в зависимости от наполнения содержимым этих блоков.

  38. Aortan пишет:

    Увы, значения свойства flex-wrap на сайте описаны неверно. “nowrap: блоки расположены в одну линию слева направо (в rtl справа налево)” и “wrap: блоки расположены в несколько горизонтальных рядов (если не помещаются в один ряд)” – это верно только если главная ось – горизонтальная (flex-direction: row или row-reverse).
    А так как многострочный режим работает и для вертикального расположения строк, правильней написать “nowrap: блоки расположены в одну линию в направлении вектора главной оси” и “wrap: блоки расположены в несколько рядов вдоль вектора главной оси (если не помещаются в один ряд)”.

  39. Aortan пишет:

    В целом то статья отличнейшая. Забейте на мои комменты) просто поправьте определение flex-wrap.

  40. Дмитрий пишет:

    В свойстве align-items значение stretch поставьте первым( по аналогии с flex-start(по умолчанию)). В соответственно поправте вторую таблицу. Просто перфекционизмом болею.

Оставить комментарий

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

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

*

* Copy This Password *

* Type Or Paste Password Here *

Проект создан в GanttPRO
Спасибо за лайк в FACEBOOK
Подписывайтесь на новости вконтакте
Последние статьи от html5.by