Display flex кроссбраузерно – Адаптивный Резиновый Кроссбраузерный CSS дизайн на FLEX. Почему Chrome отображает не правильно?

Поддерживает ли браузер PhoneGap модель CSS flexbox? Какая спецификация flexbox (новая или старая)? Я пробовал с-webkit-flex spec, но не повезло!

Что такое поддержка Firefox v21 Flexbox align-self? Есть альтернативы?

Есть ли у Dojo какие-либо обходные пути для поддержки CSS3 Уклон Тень коробки закругленный угол кроссбраузерная поддержка. если нет, то что вы, ребята, предложите с приложением построить на Dojo,…

Что такое кроссбраузерная альтернатива уведомлению Webkit /Html предпочтительно в jquery/css. я в основном хочу что-то, что может всплывать из нижней правой части страницы, например уведомление…

Мне нужна кроссбраузерная текстовая область для веб-чата, которая поддерживает HTML . Можем ли мы создать его с помощью jquery ?

У меня есть следующий код для flexbox, и он отлично работает в Chrome и Firefox, однако он не эффективен в Safari(любой версии). Я пробовал конкретные префиксы, но не смог добиться такого же…

У меня есть переменный набор изображений, которые я показываю в flexbox, и я пытаюсь убедиться, что изображения вертикально и горизонтально выровнены с их родительским div. Я пробовал обычное…

Я использую autoprefixer с postcss и webpack для проекта. Я также использую CSS сетки. Однако я заметил, что когда я создаю свой код, префиксы ms для сетки css не работают. Вот мой…

Я учусь использовать CSS flexbox, и я хотел бы сделать большое изображение слева и два маленьких изображения, сложенных друг на друга. Как я могу сделать это с помощью CSS flexbox? <div…

Я использую Modernizr v3 на своем веб-сайте для тестирования поддержки flexbox. Modernizr добавляет класс тела flexbox для браузеров, которые его поддерживают, и no-flexbox для браузеров, которые…

Особенности –webkit-box или как «подружить» flexbox со старыми Safari / Habr

Проблема именно в этом! Ведь по статистике Apple, только 47% обладателей iPhone имеют возможность использовать Safari 9.2+.

А что делать остальным?

На помощь в этом приходит так называемый старый синтаксис flexbox – display: box;
Это аналог свойства display: flex; только он поддерживается всеми Safari, начиная с версии 5.0+.

Однако всё не так просто:

1. Display: box работает только с префиксами, в данном случае с -webkit- (display: -webk2) it-box;).
2. Странно работает с float.
3. Аналогов некоторым современным свойствам нет.

Как же решить уже найденные проблемы?

Прописываем вендорные префиксы для box и связанным свойствам. Обтекания внутри box прячут элементы.

Эту ошибку пофиксить легко. Достаточно элементам, имеющим float, добавить свойство position: relative.

Почему бы просто не убрать float? – А вот почему:

Я приведу список всех рабочих аналогов flex-свойств и box-свойств:

-webkit-box-orient (flex-direction) – направление оси элементов.

Бывает нескольких видов в случае нового синтаксиса:

— column – колонка;
— row (по умолчанию) – строка;
— row-reverse – реверсия строки;
— column-reverse – реверсия колонки.

В случае старого синтаксиса я использую всего два свойства:

— vertical – колонка;
— horizontal – строка.

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

Для реверса есть свойство -webkit-box-direction, которое имеет 2 значения – normal и reverse.

-webkit-box-pack (justify-content) – задает выравнивание по горизонтали.

Новый синтаксис:

— flex-start, flex-end – элементы прижаты к началу/концу родителя;
— space-between – распределяет элементы равномерно внутри родителя, не оставляя при этом боковых отступов;
— center – центрирует элементы.

Старый синтаксис:

— start, end – аналог flex-start, flex-end;
— justify – аналог space-between;
— center – то же, что и center в новом.

У space-around НЕТ аналога!

-webkit-box-align (align-items) – выравнивание по вертикали. По праву могу назвать это одним из главных достоинств flexbox.

Новый синтаксис:

— flex-start, flex-end – элементы прижаты к верху/низу родителя;
— baseline – дефолтное значение, выравнивание по базовой линии шрифта без учета свисаний;
— center – центрирует элементы;
— stretch – растягивает дочерние блоки по высоте.

Старый синтаксис:

— start, end – аналог flex-start, flex-end.

Остальные свойства идентичны

-webkit-box-ordinal-group (order) – определяет порядковый номер элемента в группе.
В обоих случаях задается цифрой.

Других вариантов либо нет, либо они не работают. Например:

-webkit-box-lines – это, по идее, аналог свойства flex-wrap, но у меня он почему-то не работает.

И напоследок.

Если вам нужно применить любое CSS-свойство только для -webkit-, можете использовать рабочий CSS-хак. Он проверен и он РАБОТАЕТ:

@media all and (-webkit-min-device-pixel-ratio:0) {
/*Всё, что вы сюда напишете, будет работать только с -webkit-*/
}

Автор статьи: Виктор Рябовол

5 Flexbox методов, о которых вы должны знать / Habr

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

1. Создание столбцов с одинаковой высотой

Flexbox не видит в этом проблемы. Все, что нам нужно, так это инициализировать гибкую модель. Обязательно убедитесь, что flex-direction и align-items имеют значения «по умолчанию».

<div>
   <div></div>
   <div></div>
   <div></div>
</div>

.container{
   display: flex;
   flex-direction: row; /*Пункты внутри контейнера будут располагаться горизонтально*/
   align-items: stretch; /*Пункты внутри контейнер будут принимать всю его высоту*/
}

2. Изменение порядка

Это свойство называется order. Оно позволяет мне менять любое количество flex элементов и изменять их последовательность, в которой они появятся на экране. Этот параметр представляет собой целое число, определяющее положение элемента — более низкие числа означают больший приоритет.

<div>
   <div>...</div>
   <div>...</div>
   <div>...</div>
</div>

.conteiner{
   display: flex;
}

/*Обратный порядок элементов*/

.blue{
   order: 3;
}

.red{
   order: 2;
}

.green{
   order: 1;
}

3.Горизонтальное и вертикальное центрирование

Flexbox предлагает более простое решение этой проблемы. Каждый гибкий макет имеет два направления на оси (X,Y) и два отдельных свойства для их выравнивания. Мы можем позиционировать любой элемент прямо в середине родительского контейнера.

<div>
   <div>...</div>
</div>

.container{
   display: flex;
   /*Центр по главной оси*/
   justify-content: center;
   /*Центр по вспомогательной оси*/
   align-items: center;
}

4. Создание полностью отзывчивой сетки (Responsive Grids)

Строка flexbox сетки представляет собой простой контейнер с display: block;. Внутри горизонтального столбца может быть любое количество элементов, размер которого устанавливается с помощью Flex. Гибкая модель адаптируется под размер окна браузера, так что эта схема должна отлично выглядеть на всех устройствах. Тем не менее, если все таки не хватит места на экране по горизонтали, то мы сможем решить эту проблему с помощью медиа-запроса.

<div>
   <!-- Эта колонка будет 25% в ширину -->
   <div>...</div>
   <!-- Эта колонка будет 50% в ширину -->
   <div>...</div>
   <!-- Эта колонка будет 25% в ширину -->
   <div>...</div>
</div>

.container{
	display: flex;
}

.col-1{
	flex: 1;
}

.col-2{
	flex: 2;
}

@media (max-width: 800px){
	.container{
		flex-direction: column;		
	}
}

5. Создание идеального Sticky Footer (прилипающий футер)

<body>
	<div>...</div>
	<!-- Наш липкий футер -->
	<footer>...</footer>
</body>

html{
    height: 100%;
}

body{
    display: flex;
    flex-direction: column;
    height: 100%;
}

.main{
   /*Основной раздел будет занимать все свободное место на странице*/
   flex: 1 0 auto;
}

footer{
   /*Футер будет занимать столько места по вертикали, сколько и должен и не пикселя больше */
   flex: 0 0 auto;
}

Вывод

Надеюсь, что мои советы CSS были для вас полезны и что они помогут вам создавать более качественные и более адаптивные макеты.

Жду ваших комментариев по этому поводу.

Верстаем новостной сайт с помощью Flexbox / Habr

Примечание: этот материал представляет собой свободный перевод статьи Джереми Томаса о том, как просто работать с Flexbox на примере верстки шаблона новостного сайта.

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

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

Ну, поехали!

1. Начинаем с создания двух столбцов

В свою очередь, Flexbox упрощает этот процесс, обладая рядом таких преимуществ, как:

— написание более «чистого» кода: от нас лишь требуется создать контейнер с правилом display: flex;
— гибкость: мы можем изменять размер, растягивать и выравнивать столбцы путем изменения пары строк CSS;
— семантическая разметка;
— кроме того, с использованием Flexbox отпадает необходимость отменять обтекание во избежание непредсказуемого поведения лейаута.

Давайте начнем работу с создания двух столбцов, один из которых будет занимать 2/3 ширины нашего контейнера, а еще один — 1/3 его часть.

<div>
  <div>
    2/3 column
  </div>
  <div>
    1/3 column
  </div>
</div>

— контейнер columns;
— два дочерних элемента column, один из которых имеет дополнительный класс main-column, который мы используем позже для того, чтобы сделать столбец шире.

.columns {
  display: flex;
}

.column {
  flex: 1;
}

.main-column {
  flex: 2;
}

Добавим немного визуального оформления и, в итоге, получим:

Кликните для просмотра в действии

2. Делаем каждый столбец flexbox-контейнером

Итак, нам необходимо, чтобы статьи:

— располагались вертикально внутри столбца-контейнера;
— занимали все доступное место.

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

Кликните для просмотра в действии

3. Делаем контейнер из статьи

— заголовок;
— параграф;
— информационную панель с именем автора и количеством комментариев;
— какую-нибудь адаптивную картинку.

Здесь мы используем Flexbox для того, чтобы «прижать» информационную панель к низу элемента. Вот, посмотрите, какой результат мы ожидаем получить.

А вот и сам код:

<a>
  <figure>
    <img src="">
  </figure>
  <div>
    <h3>
      <!-- Заголовок -->
    </h3>
    <p>
      <!-- Контент -->
    </p>
    <footer>
      <!-- Информация -->
    </footer>
  </div>
</a>

.article {
  display: flex;
  flex-direction: column;
  flex-basis: auto; /* Устанавливает начальный размер элемента в зависимости от его содержимого */
}
 
.article-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}
 
.article-content {
  flex: 1; /* Содержимое заполняет все оставшееся место, тем самым прижимая информационную панель к нижней части */
}

Также мы применили свойство flex: 1 к элементу article-content, тем самым растянув его на все свободное место и прижав article-info к низу. Высота столбцов в этом случае не имеет значения.

Кликните для просмотра в действии

4. Добавляем несколько вложенных столбцов

<div>
  <div>
    <a>
      <!-- Содержимое статьи -->
    </a>
  </div>
 
  <div>
    <a>
      <!-- Содержимое статьи -->
    </a>
    <a>
      <!-- Содержимое статьи -->
    </a>
    <a>
      <!-- Содержимое статьи -->
    </a>
  </div>
</div>

.nested-column {
  flex: 2;
}

Кликните для просмотра в действии

5. Делаем первую статью с горизонтальным лейаутом

.first-article {
  flex-direction: row;
}
 
.first-article .article-body {
  flex: 1;
}
 
.first-article .article-image {
  height: 300px;
  order: 2;
  padding-top: 0;
  width: 400px;
}

Кликните для просмотра в действии

6. Делаем адаптивный лейаут

Одной из замечательных вещей в Flexbox является то, что достаточно удалить правило display: flex в контейнере для того, чтобы полостью отключить его (Flexbox), в то время, как остальные его свойства (такие, как align-items или flex) останутся рабочими.

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

Итак, мы собираемся удалить display: flex из селекторов .columns и .column, вместо этого «запаковав» их в медиа-запрос:

@media screen and (min-width: 800px) {
  .columns,
  .column {
    display: flex;
  }
}

7. Добавляем завершающие штрихи

@media screen and (min-width: 1000px) {
  .first-article {
    flex-direction: row;
  }

  .first-article .article-body {
    flex: 1;
  }

  .first-article .article-image {
    height: 300px;
    order: 2;
    padding-top: 0;
    width: 400px;
  }

  .main-column {
    flex: 3;
  }

  .nested-column {
    flex: 2;
  }
}

А вот и финальный результат!

Кликните для просмотра в действии

Вывод

многоколоночность, flexbox, сеточная разметка / Habr

Поддержку новых функций браузерами можно проверить на сайте caniuse.com:

Multi-column

#mcexample {
    column-width: 13em;
  }

Можно указывать количество колонок:

#mcexample {
    column-count: 3;
  }

Меняем стиль колонок:

#mcexample {
    columns: auto 13em;                   /* column-count,
column-width */
    column-gap: 1em;
    column-rule: 1em solid black;         /* width, style, color */
  }

По сути главная и самая ожидаемая функция этого свойства — это возможность перетекания текста из одной колонки в другую. Непонятно только, почему оно не появилось намного раньше.

Flexbox

На tutplus.com есть простые наглядные примеры применения flexbox. Можно располагать дочерние блоки с нужным выравниванием, горизонтальным:

или вертикальным:

Растягивать на всю ширину:

И многое другое. Вызов flexbox очень прост:

<ul>
  <li>An item</li>
  <li>Another item</li>
  <li>The last item</li>
</ul>

ul {
   /* Old Syntax */
   display: -webkit-box;
   /* New Syntax */
   display: -webkit-flexbox;
}

Сеточная разметка

Спецификация — CSS Grid Layout — представлена Microsoft в апреле этого года, поэтому разметка работает пока только в Internet Explorer 10. Но учитывая фундаментальность проделанной работы, поддержка функционала другими браузерами — это вопрос времени.

Сеточная разметка позволяет размещать контент отдельно от лэйаута, используя строки и колонки. Для начала необходимо объявить сетку:

#gridexample {
     display: -ms-grid;
    -ms-grid-rows: 30px 5em auto;
    -ms-grid-columns: auto 70px 2fr 1fr;
  }

Расшифровка:

• Первая строка — 30 px в высоту
• Вторая строка — 5 em в высоту
• Размер третьей строки будет зависить от количества контента
• Размер первой колонки будет зависить от количества контента
• Вторая колонка — 70 px в ширину
• Третья и четвертая колонки займут 2/3 и 1/3 ширины соответсвенно

Добавляем элемент в первую строку второй колонки:

#griditem1 {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }

Можно растянуть элемент на всю ширину с помощью grid-row-span:

#griditem1 {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    -ms-grid-row-span: 2;
  }

Или добавить выравнивание с помощью grid-row-align или grid-column-align:

  #griditem1 {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    -ms-grid-column-align: center;
  }

Пример использования Многоколоночности, flexbox и сеточной разметки можно посмотреть на сайте Griddle от Microsoft.

Материалы по теме