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

Содержание

Стоит ли использовать Flex, если важна кроссбраузерность и скорость разработки?

Этот вопрос не позволил мне спокойно продолжать работу над созданием своей сетки на flex-box, поэтому я решил ответить на него, хотя думаю толку не будет. Судя по тому как вы слепо верите в некие мифические баги, сложно вообще что-либо советовать. Вы с таким страхом относитесь к флексам, что мне даже интересно, а что вы хотите юзать в 2019 году ? Таблицы ? Флоаты ? Смешно.

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

Нужно понимать для чего вы изучаете верстку. Если это pet-project, то тут никто вам не запретит юзать даже флоаты, но позволит ли вам совесть верстать сайт для клиента в таком стиле ? Я понимаю что есть цены на сайты за которые хочется делать "дерьмо" в красивой обёртке, но это уже вопрос личного состояния, я бы сказал даже вопрос собственного достоинства. Если вы оцениваете свой труд, знания, время в районе двух дошираков, то это уже ваши проблемы. Быть может пора забыть про IE и старые версии браузеров ? Ну ок, сейчас вы боитесь Флекс, а завтра к вам придёт заказчик и скажет что хочет +99 всякой анимации + свойства которые не поддерживаются в Ишакозавре, но он предложит вам круглую сумму и что вы сделаете ? Будете искать ответы ? Сравнения проводить...

Используйте Flexbox - но в правильной комбинации свойств и всё будет в шоколаде.

Неужели все те, кто используют Flex'ы, знают нюансы Flex'ов в разных браузерах и верстают очень аккуратно?

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

Или неужели они проверяют верстку? Не верится что-то.

Я сейчас от смеха чуть не помер. Где ж вы видели разработчика который не проверяет проделанную работу ?

Флексы очень и очень и очень сильно ускоряют разработку, и делают работу приятной. Создавать элементы с помощью флексов, это одно наслаждение. Чёрт побери...

Вам нужно съездить на отдых. Быть может отдохнуть от разработок, а потом вернуться и начать всё с нуля используя флексы. При этом начинайте изучать Гриды. Это тоже вкусный десерт.

Я желаю вам удачи и скорейшего выздоровления!

Кроссбраузерная поддержка для CSS Flexbox

Я использую код, упомянутый ниже, он работает на моем Chrome, но не на моем IE9 и Safari.

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

<div>
    <div></div>
    <div></div>
</div>
css3 flexbox cross-browser

Поделиться Источник jack prelusky     03 июля 2013 в 12:20

5 Ответов



22

Чтобы охватить все реализации Flexbox, ваш CSS будет выглядеть следующим образом:

.foo {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

Однако обратите внимание, что указание flex-direction: row не является необходимым, если вы не переопределяете предыдущее объявление flex-direction: row-это направление по умолчанию. Также обратите внимание, что IE10 является первой версией IE для поддержки Flexbox.

Поделиться cimmanon     03 июля 2013 в 14:36



16

Модель CSS Flexbox оптимизирована для дизайна пользовательского интерфейса. Он разработан в первую очередь для того, чтобы избежать переполнения родительского элемента. Он будет сжимать дочерние элементы, когда размер элемента-предка будет сужен. Он заполнит пространство, расширяя размер дочернего элемента при расширении размера элемента-предка. Flex поведение сжатия и расширения контейнера может нарушаться с помощью свойства min и max width / height.

CSS FlexBox версии по версиям

W3 2009 : дисплей: коробка;

box-align                start | end | center | baseline | stretch  
box-direction            normal | reverse | inherit
box-flex                 <number>   0.0
box-flex-group           <integer>  1
box-lines                single | multiple
box-ordinal-group        <integer>  1   visual
box-orient               horizontal | vertical | inline-axis | block-axis | inherit inline-axis box elements    no  no  visual
box-pack                 start | end | center | justify 

W3 2011: дисплей flexbox / inline-flexbox

flex-align        auto | baseline   auto
flex-direction    lr | rl | tb | bt | inline | inline-reverse | block | block-reverse   flexboxes   no  lr | rl | tb | bt
flex-order        <integer> 1   
flex-pack         start | end | center | justify    

W3 2012: дисплей flex / inline-flex

align-content    flex-start | flex-end | center | space-between | space-around | stretch    
align-items      flex-start | flex-end | center | baseline | stretch
align-self       auto | flex-start | flex-end | center | baseline | stretch                 
flex-direction   row | row-reverse | column | column-reverse
flex-flow        <'flex-direction'> || <'flex-wrap'>    
flex-grow        <number>   ‘0’ 
flex-shrink      <number>   ‘1’
flex-wrap        nowrap | wrap | wrap-reverse
justify-content  flex-start | flex-end | center | space-between | space-around
order            <number>   0

Поделиться chandru kutty     03 июля 2013 в 13:05



2

Мой Flexbox css: я протестировал на серверальных устройствах от Android 2.3.3 и IOS и работает нормально:

.flex-container {
        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+ */
        width: 100%;

}

.item {
        -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: 1;         /* OLD - Firefox 19- */
        -webkit-flex: 1;          /* Chrome */
        -ms-flex: 1;              /* IE 10 */
        flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

Поделиться Martin Alcubierre Arenillas     24 сентября 2014 в 16:56



1

IE9-к сожалению, не поддерживает Flexbox вообще. IE10 поддерживает версию 2011 года.

Opera 12.1+ поддерживает последнюю версию 2012 года без фиксации. Он также будет поддерживаться Chrome 30+ и IE11+. Firefox 22 уже поддерживает его, но только частично — он не поддерживает свойство flex-wrap и стенографию flex-flow.

Предыдущие версии Firefox, Chrome и Safari 3.1+ поддерживают версию 2009 года. Chrome 21+ также поддерживает версию 2012 с префиксом.

Поделиться Ilya Streltsyn     03 июля 2013 в 14:57



1

Я бы предложил прочитать спецификацию, чтобы полностью понять: http://dev.w3.org/csswg/css-flexbox/

Для визуально мыслящих @chris-coyier недавно обновил свой пост w/ справка от (@hugo-giraudel): http://css-tricks.com/snippets/css/a-guide-to-flexbox/

код sample:Live(кредит на @chris-coyier просто не могу найти оригинальный пост так переделан): http://cdpn.io/oDxnp

скомпилированный out put будет выглядеть примерно так

дисплей: flex; =>

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

flex-направление: строка; =>

-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;

Поделиться imagineux     20 мая 2014 в 15:36



Поддержка PhoneGap для модели FlexBox

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


Firefox v21 поддержка Flexbox align-self?

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


Поддержка Dojo по отношению к CSS3

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


кроссбраузерная альтернатива уведомлению Webkit /Html

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


Кроссбраузерная текстовая область для чата

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


Поддержка Flexbox для Safari

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


CSS flexbox центрирование изображений

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


Поддержка сетки CSS для autoprefixer на webpack

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


Укладка изображений с CSS Flexbox

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


Modernizr: IE10 & Flexbox: как получить IE10 flexbox обнаружен

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


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

Уверен, многие Front End Developer-ы постоянно сталкиваются с проблемой поддержки flexbox в старых версиях популярных браузеров. Среди них выделяются два явных фаворита – Internet Explorer (IE) и Safari. С IE всё проще, т.к. flex поддерживается в версиях 10.0+. Версии ниже уже не актуальны, поэтому их часто игнорируют. В Safari же ситуация иная, поскольку поддержка современной спецификации flexbox (по мнению Caniuse.com) начинается с версии IOS Safari 9.2+.



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


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


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

На помощь в этом приходит так называемый старый синтаксис 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 является стандартом CSS, оптимизированным для проектирования пользовательских интерфейсов. Используя различные свойства Flexbox мы можем построить нашу страницу из небольших блоков, которые затем с легкостью сможем перемещать и изменять размеры, как нам угодно. Адаптивные веб-сайты и приложения пользуются огромным спросом в нынешней веб-индустрии.

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

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


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

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

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

Пример

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


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

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

<div>
   <div>...</div>
   <div>...</div>
   <div>...</div>
</div>
.conteiner{
   display: flex;
}

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

.blue{
   order: 3;
}

.red{
   order: 2;
}

.green{
   order: 1;
}

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


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

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

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

Пример

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


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

Строка 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 (прилипающий футер)


Flexbox имеет простое решение этой проблемы. Применение display: flex; к тегу body позволяет построить весь наш макет страницы, на основе свойств Flex. Да чего я все говорю, да говорю? Давайте уже лучше посмотрим на практике.
<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;
}

Вывод


Все браузеры (кроме IE 9) теперь поддерживают режим Flexbox. Если вы не использовали Flexbox до этого момента, то я рекомендуем Вам попробовать.

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

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

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

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

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

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

Ну, поехали!

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


Создание столбцов при помощи CSS всегда влекло за собой определенные трудности. На протяжении длительного времени для выполнения данной задачи широко использовались (и используются) float’ы и / или таблицы, но каждый из этих методов имел (и имеет) свои недостатки.

В свою очередь, 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;
}

Поскольку main-column имеет значение flex равное 2, то этот столбец займет в два раза больше места, чем второй.

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


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

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


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

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

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

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


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

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


Теперь, чтобы еще больше расширить наши возможности, давайте представим каждую статью в виде flexbox-контейнера. Каждый такой контейнер будет содержать:

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

Здесь мы используем 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-direction: column.

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


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

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


На самом деле, нам нужно, чтобы левый столбец включал в себя еще несколько столбцов. Поэтому нам необходимо заменить второй элемент, отвечающий за статью, контейнером columns, который мы использовали ранее.
<div>
  <div>
    <a>
      <!-- Содержимое статьи -->
    </a>
  </div>
 
  <div>
    <a>
      <!-- Содержимое статьи -->
    </a>
    <a>
      <!-- Содержимое статьи -->
    </a>
    <a>
      <!-- Содержимое статьи -->
    </a>
  </div>
</div>

Поскольку мы хотим, чтобы первый вложенный столбец был шире, добавим к элементу класс nested-column, а в CSS укажем:
.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;
}

Свойство order в данном случае играет большую роль, поскольку оно позволяет изменять очередность HTML-элементов без изменения HTML-разметки. В действительности, article-image в коде идет перед элементом article-body, но ведет себя так, будто стоит после него.


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

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


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

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

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

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

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

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

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


Для того, чтобы лейаут выглядел более привлекательно на больших экранах, давайте добавим кое-какие CSS-твики:
@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;
  }
}

Содержимое первой статьи выровнено по горизонтали: текст расположен по левой стороне, а картинка — по правой. Также, главный столбец теперь стал шире (75%). То же самое касается и вложенного столбца (66%).

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


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

Вывод


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

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

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

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

Multi-column


При помощи multi-column можно легко разбивать текст на несколько колонок без использования костылей в виде позиционирования и float'ов. Можно указывать ширину каждой колонки, их количество будет ограничиваться только шириной браузера:
#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


Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке. Официальная спецификация находится здесь: CSS Flexible Box Layout Module

На 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.

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


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

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