Flexbox ms: Полное руководство по Flexbox | Frontender Magazine

Содержание

Обратная совместимость Flexbox - CSS

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

Как  и все спецификации CSS, flexbox претерпела огромное количество изменений, прежде чем стать Кандидатом в рекомендации W3C. У спецификации в этом статусе не должно быть значительных изменений, однако с предыдущими итерациями все было иначе.

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

В 2009 спецификация выглядела совсем по-другому. Чтобы создать flex-контейнер, вам нужно было использовать display: box и несколько box-* свойств, которые делали то, что сегодня вы понимаете под flexbox.

Очередное обновление спецификации поменяло синтаксис на display: flexbox — и опять с вендорными префиксами.

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

Существует несколько старых статей, которые описывают более ранние версии flexbox, их довольно легко вычислить по тому, как они описывают создание flex-контейнера. Если вы нашли что-то вроде  display: box или display: flexbox, то это уже устаревшая информация.

Браузеры отлично поддерживают flexbox, и на данный момент большинству из них не нужны префиксы для этого. Safari последним из основных браузеров избавился от префиксов после релиза Safari 9 в 2015. Два браузера, о которых вам нужно помнить для обеспечения кроссбраузерности, это:

  • Internet Explorer 10, который внедрил display: flexbox версию спецификации с префиксом -ms-.
  • UC Browser, который все ещё поддерживает спецификацию версии 2009 год с display: box и префиксом -webkit-.

Также возьмите на заметку, что Explorer 11 поддерживает современный display: flex, однако не без багов.

The majority of issues with flexbox relate to the changes in the specification, as it has been developed, and the fact that many of us were attempting to use an experimental specification in production. If you are trying to ensure backwards compatibility with old versions of browsers, and in particular IE10 and 11, the Flexbugs site is a helpful resource. You will see that many of the listed bugs apply to old browser versions and are fixed in current browsers. Each of the bugs has a workaround listed — which can save you many hours of puzzling.

If you want to include very old browsers with flexbox support then you can include the vendor prefixes in your CSS in addition to the unprefixed version. This is becoming less and less of a requirement today as support is widespread.

.wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

Autoprefixer Online is a useful way to see which prefixes are recommended, depending on how many versions you wish to go back with browser support. You can also check Can I Use for information about when prefixes were removed in browsers to make your decision.

Given that flexbox usage is initiated with value of the display property, when needing to support very old browsers which do not support flexbox at all, fallbacks can be created by overwriting one layout method with another. The specification defines what happens if you use other layout methods on an element which then becomes a flex item.

Floated items

“float and clear do not create floating or clearance of flex item, and do not take it out-of-flow.” - 3. Flex Containers

In the following live example, I have floated two blocks and then set display: flex on the container. The items are now flex items, which means they stretch to equal height. Any float behaviour does not apply.

You can test the fallback behaviour by removing display: flex from the wrapper.

display: inline-block

Once an inline-block item becomes a flex item, it is blockified and so behavior of display: inline-block like preserving white space between items no longer applies.

Remove display: flex to see the fallback behavior. You'll see white space added between the items, which is what happens when using display: inine-block as it prefers white space like other inline items.

display: table-

The CSS table display properties are potentially very useful as a fallback, due to the fact that they allow design patterns such as full height columns and vertical centering and work back as far as Internet Explorer 8.

If you use display: table-cell on an item in your HTML it takes on the styling of an HTML table cell. CSS creates anonymous boxes to represent these items so that you do not need to wrap each item in a wrapper to represent the HTML table row, and a second one to represent the table element itself, You can’t see or style these anonymous boxes; they are there purely to fix up the tree.

If you then declare display: flex on the parent item, these anonymous boxes do not get created and so your item remains a direct child and can become a flex item — losing any of the table display features.

“Note: Some values of display normally trigger the creation of anonymous boxes around the original box. If such a box is a flex item, it is blockified first, and so anonymous box creation will not happen. For example, two contiguous flex items with display: table-cell will become two separate display: block flex items, instead of being wrapped into a single anonymous table.” - 4. Flex Items

The vertical-align property

The live example below demonstrates use of the vertical-align property along with display: inline-block. Both display: table-cell and display: inline-block allow for the use of this property. Use of vertical-align enables vertical alignment prior to flexbox. The property is ignored by flexbox and so you can use it in conjunction with display: table-cell or display: inline-block as a fallback and then safely use box alignment properties in flexbox instead.

You can use feature queries to detect flexbox support:

@supports (display: flex) {
  // code for supporting browsers
}

Note that Internet Explorer 11 does not support feature queries yet does support flexbox. If you decide the IE11 implementation is too buggy and you wish to serve it the fallback layout then you could use feature queries to serve flexbox rules only to those browsers with good flexbox support. Remember that if you want to include versions of browsers that had vendor-prefixed flexbox you would need to include the prefixed version in your feature query. The following feature query would include UC Browser, which supports feature queries and old flexbox syntax, prefixed:

@supports (display: flex) or (display: -webkit-box) {
  // code for supporting browsers
}

For more information about using Feature Queries see Using Feature Queries in CSS on the Mozilla Hacks blog.

While I’ve spent some time in this guide going through potential issues and fallbacks, flexbox is very much ready for you to be using in production work. This guide will help you in those cases where you do come across an issue or have the requirement to support older browsers.

Почему display: - ms-flex; -ms-justify-content: center; не работает в IE10?



Почему следующий код не работает в IE10?

.foo {
    display: -ms-flex; 
    -ms-justify-content: center;
}

Что мне нужно написать, чтобы они работали?

css internet-explorer-10 flexbox justify
Поделиться Источник user2590633     17 июля 2013 в 09:18

2 ответа


  • ie10 и flexboxes? (кошмар)

    К сожалению, мне нужно сделать код моего сайта совместимым с Internet Explorer 10, и у меня возникли некоторые проблемы, даже после прочтения документации на их официальном сайте вот мой код css: .uberflex { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start;...

  • Flexbox в IE10

    Я пытаюсь заставить flex box работать в IE10, но он не работает. Safari, Chrome и Firefox работают нормально, но IE10 не хочет работать. Кто-нибудь знает ответ? сайт CodePen: http://codepen.io/anon/pen/vcEGH / display: -moz-box; /* OLD - Firefox 19- (doesn't work very well) */ display:...



49

IE10 реализовал проект Flexbox с марта 2012 года . Эти свойства соответствуют этим:

.foo { display: -ms-flexbox; -ms-flex-pack: center; }

Поделиться cimmanon     17 июля 2013 в 10:11



24

Хорошим местом для начала при попытке получить правильный синтаксис для всех браузеров является http://the-echoplex.net/flexyboxes/

Для центрирования элементов по горизонтали и вертикали в контейнере вы получите код примерно такой: (работает в Chrome,FF,Opera 12.1+ и IE 10+)

FIDDLE

<div>
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

CSS

. flex-container {

    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    }
.flex-item
{
    width: 100px;
    height:100px;
    background: brown;
    margin: 0 10px;
}

/*
    Legacy Firefox implementation treats all flex containers
    as inline-block elements.
*/ @-moz-document url-prefix() { .flex-container { width: 100%; -moz-box-sizing: border-box; } }

Поделиться Danield     17 июля 2013 в 10:20


Похожие вопросы:


Почему justify-content: center не работает в IE?

У меня есть этот простой div с кнопкой внутри него . justify-content: center; отлично работает с использованием Firefox и Chrome, но не работает на IE 11: #div { height: 200px; width: 50px; border:...


Chrome не правильно переопределяет justify-content для flex box

У меня возникла проблема в Chrome 40.0.2214.93, когда, если я переопределяю justify-content для элемента, я получаю какое-то неожиданное поведение. Я создал JS Fiddle для этого здесь:...


Проблемы с IE10 и flexbox -- проект марта 2012 года не работает?

Я пытаюсь сделать свой макет flexbox совместимым с IE10, который, насколько мне известно, использует проект flexboxes от марта 2012 года. Я перепробовал все чертовы синтаксисы и их вариации, но...


ie10 и flexboxes? (кошмар)

К сожалению, мне нужно сделать код моего сайта совместимым с Internet Explorer 10, и у меня возникли некоторые проблемы, даже после прочтения документации на их официальном сайте вот мой код css:...


Flexbox в IE10

Я пытаюсь заставить flex box работать в IE10, но он не работает. Safari, Chrome и Firefox работают нормально, но IE10 не хочет работать. Кто-нибудь знает ответ? сайт CodePen:...


Flex auto margin не работает в IE10 / 11

У меня есть сложный макет, где я центрирую различные элементы по вертикали и горизонтали с помощью flexbox. Затем последний элемент имеет margin-right:auto; , применяемый для выталкивания элементов...


- ms-flexbox не работает в IE8

Во первых я написал: display: flex; justify-content: space-between; и он работал для IE11, но потом я понял, что он не работает для IE8, поэтому я добавил еще две строки: display: flex;. ..


дисплей: flex не работает в Интернете Explorer

Мой гибкий контейнер: .back_pattern { display: flex; display: -ms-flexbox; -ms-flex-pack: center; flex-direction: column; align-content: center; justify-content: center; min-height: 100vh; width:...


justify-content: центр не работает на flex:100% в мобильном телефоне

Я пытаюсь построить сетку ссылок на кнопки размером 3 на 3 flexbox, которая будет реагировать. Сетка отлично смотрится на рабочем столе и планшете, однако в мобильной версии элементы выровнены по...


CSS justify-content: пробел между IE11 работает неправильно

В моем проекте у меня есть progressbar, и он отлично работает во всех браузерах, кроме IE11 (<11 я не поддерживаю). Во всех браузерах это выглядит так: А в IE11 это выглядит так: я не знаю,...

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

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

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

1

display: flex

Есть страница:

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

#container {
  display: flex;
}

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

2

flex-direction

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

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

#container {
  display: flex;
  flex-direction: column;
}

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

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

3

justify-content

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

#container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

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

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

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

4

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:

5

align-self

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

#container {
  align-items: flex-start;
}
. square#one {
  align-self: center;
}
// Only this square will be centered.

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

6

flex-basis

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

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

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

7

flex-grow

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

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

Теперь блоки заняли оставшееся место в контейнере. Но что значит 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 работает только для главной оси, пока мы не изменим её направление.

8

flex-shrink

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

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

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

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

9

flex

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

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

.square#one {
  flex: 2 1 300px;
}
.square#two {
  flex: 1 2 300px;
}

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

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

10

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

Как с 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.

Перевод статьи «How Flexbox works — explained with big, colorful, animated gifs»

Генератор flex, flexbox

Описание flex генератора

Общие сведения

Основная идея flex генератора сделать удобным процесс разработки flex конструкций: обеспечив наглядность и предоставив широкий набор дополнительных настроек. Данный генератор предоставляется бесплатно и без каких-либо ограничений на сайте cssworld.ru.

Для простоты, здесь и далее, контейнером называется родительский элемент, а блоками называются дочерние элементы flex технологии.

Использование

Каждый параметр имеет возможность выбора предустановленных значений. Значения по умолчанию выделены фоном. Параметры предусматривающие произвольные значения можно изменять самостоятельно.

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

Для удобства, процесс поделен на три последовательные составные части, размещенных в соответствующих вкладках, а также текущий справочный раздел: Контейнер, Блоки, Результат

1. Контейнер

Настройка контейнера flex блоков через установку параметров. Данные настройки имеют отношение исключительно к родительскому элементу flex блоков.

2. Блоки

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

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

У выделенного элемента возможно изменить контент (его текстовое наполнение), а также отдельно для него установить и очистить установленные значения.

3. Результат

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

Поддержка старых браузеров

Поддержка включается во вкладке "Результат" при включенной отметке "Поддержка старых браузеров (префиксы)". Данное действие добавляет предшествующие параметры с префиксами -ms- (только для IE10) и -webkit- (все остальные браузеры).

HTML5 | Flexbox

Что такое Flexbox. Flex Container

Последнее обновление: 18.04.2017

Flexbox - это общее название для модуля Flexible Box Layout, который имеется в CSS3. Данный модуль определяет особый режим компоновки/верстки пользовательского интерфейса, который называется flex layout. В этом плане Flexbox предоставляет иной подход к созданию пользовательского интерфейса, который отличается от табличной или блочной верстки. Развернутое описание стандарта по модулю можно посмотреть в спецификации.

Благодаря Flexbox проще создавать сложные, комплексные интерфейсы, где мы с легкостью можем переопределять направление и выравнивание элементов, создавать адаптивные табличные представления. Кроме того, Flexbox довольно прост в использовании. Единственная проблема, которая может возникнуть при его применении, - это кроссбраузерность. Например, в Internet Explorer поддержка Flexbox и то частичная появилась только в последней версии - IE11. В то же время все современные браузеры, в том числе Microsoft Edge, Opera, Google Chrome, Safari, Firefox, имеют полную поддержку данного модуля.

Основными составляющими компоновки flexbox являются flex-контейнер (flex container) и flex-элементы (flex items). Flex container представляет некоторый элемент, внутри которого размещены flex-элементы.

Основные понятия

Прежде чем переходить к изучению верстки flexbox, стоит рассмотреть некоторые основные понятия.

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

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

Термины main start и main end описывают соответственно начало и конец центральной оси, а расстояние между между ними обозначается как main size.

Кроме основной оси существует также поперечная ось или cross axis. Она перпендикулярна основной. При расположении элементов в виде строки cross axis направлена сверху вниз, а при расположении в виде столбца она направлена слева направо. Начало поперечной оси обозначается как cross start, а ее конец - как cross end. Расстояние между ними описывается термином cross size.

То есть, если элементы располагаются в строку, то main size будет представлять ширину контейнера или элементов, а cross size - их высоту. Если же элементы располагаются в столбик, то, наоборот, main size представляет высоту контейнера и элементов, а cross size - их ширину.

Создание flex-контейнера

Для создания flex-контейнера необходимо присвоить его стилевому свойству display одно из двух значений: flex или inline-flex.

Создадим простейшую веб-страницу, которая применяет flexbox:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flexbox в CSS3</title>
        <style>
			.flex-container {
				display: flex;
			}
			.flex-item {
				text-align:center;
				font-size: 1. 1em;
				padding: 1.5em;
				color: white;
			}
			.color1 {background-color: #675BA7;}
			.color2 {background-color: #9BC850;}
			.color3 {background-color: #A62E5C;}
        </style>
    </head>
    <body>
        <div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
		</div>
    </body>
</html>

Для контейнера flex-container установлено свойство display:flex. В нем располагается три flex-элемента.

Если значение flex определяет контейнер как блочный элемент, то значение inline-flex определяет элемент как строчный (inline). Рассмотрим оба способа на примере:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flexbox в CSS3</title>
        <style>
			. flex-container {
				display: flex;
				border:2px solid #ccc;
			}
			.inline-flex-container {
				display: inline-flex;
				border:2px solid #ccc;
				margin-top:10px;
			}
			.flex-item {
				text-align:center;
				font-size: 1.1em;
				padding: 1.5em;
				color: white;
			}
			.color1 {background-color: #675BA7;}
			.color2 {background-color: #9BC850;}
			.color3 {background-color: #A62E5C;}
        </style>
    </head>
    <body>
        <div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
		</div>
		
		<div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
		</div>
    </body>
</html>

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

Готовы ли мы использовать Flexbox?

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

имя существительное
1. жесткий, как правило, прямоугольный контейнер.

Модуль Flexible Box, также известный как flexbox, является самым последним и лучшим на данный момент. Он углубляется в основы блочной модели CSS, предоставляя нам мощный и очень полезный модуль для конфигурации макетов. Это легко определяется в нашем CSS и разметке, а адаптивные адаптации — это всего лишь медиа-запрос. Подумайте о мире, где нам не нужно очищать плавающие области или использовать фреймворки или массы кода для создания адаптивных сеток . Flexbox делает всю грязную работу. Для нас это просто простая реализация. Мы определяем флекс-контейнер, и в нем есть флекс-элементы.

Что такое Flexbox?

Вот определение flexbox, согласно MDN :

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

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

  1. flex-direction
  2. justify-content Другими словами, если у нас есть 3 элемента при общей общей ширине 50% их контейнера, мы можем указать, следует ли упаковать элементы слева, справа, по центру, распределить слева направо с равным интервалом между ними. их, наряду с некоторыми другими вариантами.
  3. flex-wrap

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

История Flexbox

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

В двух словах:

  • Спецификация 2009 года была выпущена, и вместе с ней пришли все объявления типа коробки. Если вы видите какие-либо учебные пособия или примеры CSS, которые используют свойства типа box- Вот индекс собственности от 2009 спец .
  • В 2011 году спецификации немного неловко изменились. Flex-контейнер был определен с помощью box-*display: flexboxкоторый вы можете увидеть здесь ). Была также функция flex () .
  • В 2012 году спецификация была обновлена ​​до того, что мы знаем сегодня. Если вы видите display: inline-flexboxdisplay: flex

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

Flexbox в действии

Достаточно поговорить о flexbox, давайте теперь рассмотрим базовый пример. Вот наша разметка:

 <div>
  <div>
    <h3>Item 1</h3>
  </div>
  <div>
    <h3>Item 2</h3>
  </div>
  <div>
    <h3>Item 3</h3>
  </div>
  <div>
    <h3>Item 4</h3>
  </div>
</div>

А вот CSS для запуска flexbox:

 .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.item {
  padding: 20px;
  width: 22%;
  background-color: rgb(255,150,100);
}

Это делает элемент .container.item Вот демонстрация CodePen:

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

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

Приятно знать, что поддержка браузеров высока и растет, и мы можем увидеть разбивку, посмотрев на flexbox «Можно ли использовать…» . Он поддерживается в IE10 и выше и во всех других браузерах, кроме Opera Mini. Это очень здорово видеть. Если вы ищете IE9 и ниже, вам нужно пойти по маршруту polyfill / fallback.

К сожалению, единственным доступным полифилом является Flexie , который включает модель flexbox 2009 года в неподдерживаемых браузерах. Полифилов для нового синтаксиса не существует (хотя Ричард Эррера, который создал оригинальный полифилл flexbox , работает над одним для обновленного синтаксиса ). В любом случае, вы обнаружите, что хотите сначала не использовать полифилы, поскольку они, как правило, медленные.

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

 . container {
  display: block;
}

.flexbox .container {
  display: flex;
}

Если Modernizr не ваша вещь, и вы не идете по дороге Opera, то условный CSS может быть всем, что вам нужно, чтобы помочь вам разобраться с IE9 и ниже.

Поставщик префиксов

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

Если вам нужно поддерживать все эти более старые реализации, вам понадобится множество *-box*-flexbox*-flex Скомпилированный CSS для нашего .container

 .container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

Это не красиво! Но есть решения в нашем распоряжении.

Autoprefixer

Autoprefixer — это отличный и современный инструмент, который автоматически префиксирует ваш CSS для вас. Вы можете настроить его как задачу Grunt, и он будет следить за изменениями в вашей таблице стилей. Это прекрасный инструмент, который избавит вас от множества головных болей.

Сас и компас

Sass также может прийти сюда на помощь, если мы настроим некоторые миксины, чтобы мы начали работать. Вот набор миксов Sass и базовая реализация, взятые из руководства CSS-Tricks для flexbox :

 @mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

. container {
  @include flexbox();
}

.item {
  @include flex(1 200px);
  @include order(2);
}

Compass — это фреймворк для CSS, который предлагает массу миксов для авторизации наших файлов Sass. У них есть миксин для flexbox, но, к сожалению, он для старого синтаксиса . Тем не менее, Autoprefixer (упомянутый выше) прекрасно интегрируется с Compass и обрабатывает все префиксы для вас без необходимости изменять рабочий процесс. Ухоженная.

Наконец, если вы используете PHP в качестве препроцессора CSS, вам может понадобиться взглянуть на функции Flexbox, которые предоставляют несколько простых в использовании методов для работы с различными частями flexbox.

Итак … Готовы ли мы использовать Flexbox?

Мы посмотрели на то, что такое flexbox, откуда он взялся, как его использовать, поддержка, откат, префикс и все работы. Но все же, мы должны спросить себя, готовы ли мы начать внедрять это в наших проектах. Для меня ответ — оглушительное Да . Но у этого громкого да есть некоторый основной акцент:

  1. Знайте свой проект, желаемый результат и ваш целевой рынок. Если вы публикуете мобильные приложения HTML5, тогда сделайте это. Если вы разрабатываете систему бухгалтерского учета для бизнеса с использованием Windows 98, вам, вероятно, нужно держаться подальше!
  2. Поймите, что заполнение старой версии может помочь вам, но замедлит работу и без того медленных браузеров . В общем, я рекомендую держаться подальше от полифилсов — нет смысла тормозить и без того старую систему.

Так что продолжайте учиться, практиковаться и внедрять flexbox в ваш следующий подходящий проект. Это фантастическая и мощная функция, и ей очень весело пользоваться.

Обратная совместимость Flexbox - CSS: каскадные таблицы стилей

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

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

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

В 2009 году спецификация выглядела совсем иначе. Чтобы создать гибкий контейнер, вы должны использовать display: box , и было несколько свойств box- * , которые выполняли то, что вы сегодня узнаете из flexbox.

Было обновление спецификации, которое обновило синтаксис до отображения : flexbox - это снова было с префиксом поставщика.

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

Существует несколько старых статей, относящихся к более старым версиям flexbox, которые довольно легко идентифицировать из-за изменения способа создания гибкого контейнера. Если вы найдете что-то, относящееся к display: box или display: flexbox , это устаревшая информация.

Браузеры поддерживают flexbox превосходно, и большинству браузеров на данном этапе не нужен префикс. Safari был последним из основных браузеров, удалявших префиксы, с выпуском Safari 9 в 2015 году. Два браузера, о которых следует помнить для кросс-браузерной совместимости:

  • Internet Explorer 10, в котором реализована версия спецификации display: flexbox с префиксом -ms- .
  • UC Browser, который по-прежнему поддерживает версию 2009 display: box только с префиксом -webkit- .

Отметим также, что Internet Explorer 11 поддерживает современную спецификацию display: flex , однако в ней есть ряд ошибок в реализации.

Большинство проблем с flexbox связаны с изменениями в спецификации по мере ее разработки, а также с тем фактом, что многие из нас пытались использовать экспериментальную спецификацию в производстве. Если вы пытаетесь обеспечить обратную совместимость со старыми версиями браузеров, в частности с IE10 и 11, сайт Flexbugs может оказаться полезным ресурсом.Вы увидите, что многие из перечисленных ошибок относятся к старым версиям браузеров и исправлены в текущих браузерах. Для каждой ошибки указан обходной путь, который может сэкономить вам много часов на размышления.

Если вы хотите включить очень старые браузеры с поддержкой flexbox, вы можете включить префиксы поставщиков в свой CSS в дополнение к версии без префиксов. Сегодня это становится все реже и реже, поскольку поддержка широко распространена.

  .wrapper {
  дисплей: -webkit-box;
  дисплей: -webkit-flex;
  дисплей: -ms-flexbox;
  дисплей: гибкий;
}  

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

Учитывая, что использование flexbox инициируется значением свойства display , при необходимости поддержки очень старых браузеров, которые вообще не поддерживают flexbox, резервные варианты могут быть созданы путем перезаписи одного метода компоновки другим. Спецификация определяет, что происходит, если вы используете другие методы компоновки для элемента, который затем становится гибким элементом.

Плавающие позиции

“float и clear не создают плавающего или зазора гибкого элемента и не выводят его из потока.”- 3. Гибкие контейнеры

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

Вы можете протестировать откат, удалив display: flex из оболочки.

display: inline-block

Как только элемент inline-block становится гибким элементом, он получает статус block , и поэтому поведение display: inline-block , такое как сохранение пробелов между элементами, больше не применяется.

Удалите display: flex , чтобы увидеть откат. Вы увидите, что между элементами добавлено пустое пространство, что происходит при использовании display: inline-block , поскольку он предпочитает пустое пространство, как и другие встроенные элементы.

display: table-

Свойства отображения таблицы CSS потенциально могут быть очень полезны в качестве запасного варианта, поскольку они позволяют использовать шаблоны проектирования, такие как столбцы в полную высоту и вертикальное центрирование, а также работать с Internet Explorer 8.

Если вы используете display: table-cell для элемента в вашем HTML, он принимает стиль ячейки таблицы HTML. CSS создает анонимные блоки для представления этих элементов, так что вам не нужно заключать каждый элемент в оболочку для представления строки таблицы HTML и вторую для представления самого элемента таблицы. Эти анонимные блоки нельзя видеть или стилизовать; они здесь только для того, чтобы починить дерево.

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

“Примечание. Некоторые значения display обычно вызывают создание анонимных блоков вокруг исходного блока. Если такой блок является гибким элементом, он сначала блокируется, поэтому создание анонимного блока не произойдет. Например, два смежных гибких элемента с display: table-cell станут двумя отдельными гибкими элементами display: block вместо того, чтобы быть заключенными в одну анонимную таблицу ». - 4. Flex Items

Свойство vertical-align

Живой пример ниже демонстрирует использование свойства vertical-align вместе с display: inline-block .Оба display: table-cell и display: inline-block позволяют использовать это свойство. Использование vertical-align позволяет выравнивать по вертикали до flexbox. Это свойство игнорируется flexbox, поэтому вы можете использовать его вместе с display: table-cell или display: inline-block в качестве запасного варианта, а затем вместо этого безопасно использовать свойства выравнивания поля в flexbox.

Вы можете использовать запросы функций для обнаружения поддержки flexbox:

  @supports (дисплей: гибкий) {
  // код для поддержки браузеров
}  

Обратите внимание, что Internet Explorer 11 не поддерживает запросы функций, но поддерживает flexbox.Если вы решите, что реализация IE11 содержит слишком много ошибок, и вы хотите использовать его в качестве резервного макета, вы можете использовать запросы функций для обслуживания правил flexbox только для тех браузеров с хорошей поддержкой flexbox. Помните, что если вы хотите включить версии браузеров, в которых был установлен flexbox с префиксом поставщика, вам нужно будет включить версию с префиксом в свой запрос функции. Следующий запрос функции будет включать UC Browser, который поддерживает запросы функций и старый синтаксис flexbox с префиксом:

  @supports (display: flex) или (display: -webkit-box) {
  // код для поддержки браузеров
}  

Для получения дополнительной информации об использовании Feature Queries см. Использование Feature Queries в CSS в блоге Mozilla Hacks.

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

css - Выровнять flexbox с flex-direction: column по вертикальному центру

css - Выровнять flexbox с flex-direction: column к вертикальному центру - qaru

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено 611 раз

На этот вопрос уже есть ответы :

Закрыт 2 года назад.

Как выровнять элементы по центру вертикали?

Я использую как flex-direction: column; и align-items: по центру; .

  .box {
граница: сплошной красный 1px;
ширина: 100%;
высота: 180 пикселей;

дисплей: -webkit-box;
дисплей: -ms-flexbox;
дисплей: гибкий;

-webkit-box-orient: вертикальный;
-webkit-box-direction: нормальный;
-ms-flex-direction: столбец;
flex-direction: столбец;

-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.пункт{
ширина: 20%;
граница: сплошной зеленый 1px;
}  
  
1
2
3
4
5

Создан 19 мар.

Феликс А. Дж. Феликс А. Дж.

5,85222 золотых знака2323 серебряных знака3838 бронзовых знаков

1

Надеюсь, это сработает для вас!

 . коробка{
     граница: сплошной красный 1px;
    ширина: 100%;
    высота: 300 пикселей;
    дисплей: -webkit-box;
    дисплей: -ms-flexbox;
    дисплей: гибкий;
    / * -webkit-box-orient: vertical; * /
    -webkit-box-direction: нормальный;
    -ms-flex-direction: столбец;
    flex-direction: столбец;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;

}
.пункт{
  ширина: 20%;
  граница: сплошной зеленый 1px;
}  
  
1
2
3
4
5

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

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