Flexbox, теперь понятно

Вадим Макеев, Opera Software

Flexbox, теперь понятно

Flexbox

68,51%

Первая система раскладки, которая не хак

prozrachniy.gif

<br clear=all>

F09 ‣ F11 ‣ F12

Flexbox

Flexbox 09

Flexbox 09

Flexbox 11

Flexbox 12

Flexbox 12

Собственно

Оси

Привычный CSS

			E {
			    top: 0; /* сверху */
			    bottom: 0; /* снизу */
			    text-align: center; /* горизонтально */
			    vertical-align: middle; /* вертикально */
			    }
		

Главная

Поперечная

Пушкин. Зимний вечер

Пушкин. Зимний вечер

			<div class="poem">
			    <div>буря мглою</div>
			    <div>небо кроет</div>
			    <div>вихри снежные</div>
			    <div>крутя</div>
			</div>
		

Пушкин. Зимний вечер

			.poem {
			    overflow: hidden;
			    height: 640px;
			    }
			.poem div {
			     float: left;
			     }
		

Пушкин. Зимний вечер

			.poem div:first-child {
			    background: #090;
			    }
			.poem div:last-child {
			    background: #C00;
			    }
		
буря мглою
небо кроет
вихри снежные
крутя

Включаем Flexbox

			.poem {
			    display: flex;
			    }
		
буря мглою
небо кроет
вихри снежные
крутя

Меняем направление по оси

			.poem {
			    display: flex;
			    flex-direction: row; /* по умолчанию */
			    flex-direction: row-reverse;
			    }
		
буря мглою
небо кроет
вихри снежные
крутя

Поворачиваем саму ось

			.poem {
			    display: flex;
			    flex-direction: column;
			    }
		
буря мглою
небо кроет
вихри снежные
крутя

Меняем направление по оси

			.poem {
			    display: flex;
			    flex-direction: column-reverse;
			    }
		
буря мглою
небо кроет
вихри снежные
крутя
буря мглою
небо кроет
вихри снежные
крутя

Што?

Вдоль

буря мглою
небо кроет
вихри снежные
крутя

Вдоль направо

			.poem {
			    display: flex;
			    justify-content: flex-start; /* по умолчанию */
			    justify-content: flex-end;
			    }
		
буря мглою
небо кроет
вихри снежные
крутя

Вдоль посередине

			.poem {
			    display: flex;
			    justify-content: center;
			    }
		
буря мглою
небо кроет
вихри снежные
крутя

Вдоль равномерно

			.poem {
			    display: flex;
			    justify-content: space-between;
			    }
		
буря мглою
небо кроет
вихри снежные
крутя

Вдоль красиво

			.poem {
			    display: flex;
			    justify-content: space-around;
			    }
		
буря мглою
небо кроет
вихри снежные
крутя

Перестановка

буря мглою
небо кроет
вихри снежные
крутя
буря мглою
небо кроет
вихри снежные
крутя

Меняем порядок

			.poem div:nth-child(2) {
			    order: 1;
			    }
		
буря мглою
небо кроет
вихри снежные
крутя

Меняем порядок

			.poem div {
			    order: 4;
			    }
		
буря мглою
небо кроет
вихри снежные
крутя

Меняем порядок

			.poem div:nth-child(1) { order: 2 }
			.poem div:nth-child(2) { order: 1 }
			.poem div:nth-child(3) { order: 4 }
			.poem div:nth-child(4) { order: 3 }
		
буря мглою
небо кроет
вихри снежные
крутя

Поперёк

Даём высоту

			.poem div {
			    height: 250px;
			    }
		
буря мглою
небо кроет
вихри снежные
крутя

Поперёк внизу

			.poem {
			    display: flex;
			    align-items: flex-start; /* по умолчанию */
			    align-items: flex-end;
			    }
		
буря мглою
небо кроет
вихри снежные
крутя

Поперёк посередине

			.poem {
			    display: flex;
			    align-items: center;
			    }
		
буря мглою
небо кроет
вихри снежные
крутя

Поперёк индивидуально

			.poem div:nth-child(1) {
			    align-self: flex-start;
			    }
			.poem div:nth-child(4) {
			    align-self: flex-end;
			    }
		
буря мглою
небо кроет
вихри снежные
крутя
буря мглою

Центрирование

			.poem {
			    display: flex;
			    }
			.poem div {
			    margin: auto;
			    }
		

Растягивание

буря мглою
небо кроет
вихри снежные
крутя
×
×
×
×

Растягивание

			.poem div {
			    flex-grow: 1;
			    }
		
×
×
×
×

Растягивание

			.poem div {
			    flex-grow: 1;
			    }
			.poem div:nth-child(1) {
			    flex-grow: 4;
			    }
		
×
×
×
×

Сжатие

			.poem div {
			    width: 25%;
			    }
			.poem div:nth-child(1) {
			    flex-shrink: 4;
			    }
		
×
×
×
×

Запас

			.poem div {
			    flex-grow: 1;
			    }
			.poem div:nth-child(1) {
			    flex-basis: 250px;
			    }
		
×
×
×
×

Весь Пушкин

Многострочный Flexbox

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

Перенос

			.poem {
			    display: flex;
			    flex-wrap: nowrap; /* по умолчанию */
			    flex-wrap: wrap;
			    }
		
буря мглою
небо кроет
вихри снежные
крутя
то
как зверь
она
завоет
то заплачет
как дитя
то по кровле
обветшалой
вдруг соломой
зашумит
то как
путник запоздалый
к нам в окошко
застучит

Перенос наоборот

			.poem {
			    display: flex;
			    flex-wrap: wrap-reverse;
			    }
		
буря мглою
небо кроет
вихри снежные
крутя
то
как зверь
она
завоет
то заплачет
как дитя
то по кровле
обветшалой
вдруг соломой
зашумит
то как
путник запоздалый
к нам в окошко
застучит
буря мглою
небо кроет
вихри снежные
крутя
то
как зверь
она
завоет
то заплачет
как дитя
то по кровле
обветшалой
вдруг соломой
зашумит
то как
путник запоздалый
к нам в окошко
застучит

Порядок поперёк

			.poem {
			    display: flex;
			    align-content: stretch; /* по умолчанию */
			    align-content: center;
			    }
		

Только для многострочных блоков!

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

Многострочный Flexbox в Firefox?

Фолбеки на старый Flexbox

Включение Flexbox

			E {
			    display: -webkit-box;
			    display: -moz-box;
			    display: -ms-flexbox;
			    display: -webkit-flex;
			    display: flex;
			    }
		

Растягивание блоков

			E {
			    -webkit-box-flex: 1;
			    -moz-box-flex: 1;
			    -ms-flex: 1;
			    -webkit-flex: 1;
			    flex: 1;
			    }
		

Прямая колонка

			E { -webkit-box-orient: vertical;
			       -moz-box-orient: vertical;
			        -ms-flex-direction: column;
			    -webkit-flex-direction: column;
			            flex-direction: column; }
		

Обратная колонка

			E { -webkit-box-orient: vertical;
			    -webkit-box-direction: reverse;
			       -moz-box-orient: vertical;
			       -moz-box-direction: reverse;
			        -ms-flex-direction: column-reverse;
			    -webkit-flex-direction: column-reverse;
			            flex-direction: column-reverse; }
		

Обратный ряд

			E { -webkit-box-orient: horizontal;
			    -webkit-box-direction: reverse;
			       -moz-box-orient: horizontal;
			       -moz-box-direction: reverse;
			        -ms-flex-direction: row-reverse;
			    -webkit-flex-direction: row-reverse;
			            flex-direction: row-reverse; }
		

Вдоль равномерно

			E {
			    -webkit-box-pack: justify;
			    -moz-box-pack: justify;
			    -ms-flex-pack: justify;
			    -webkit-justify-content: space-between;
			    justify-content: space-between;
			    }
		

Поперёк посередине

			E {
			    -webkit-box-align: center;
			    -moz-box-align: center;
			    -ms-flex-align: center;
			    -webkit-align-items: center;
			    }
		

Перестановка

			E {
			    -webkit-box-ordinal-group: 1;
			    -moz-box-ordinal-group: 1;
			    -ms-flex-order: 1;
			    -webkit-order: 1;
			    order: 1;
			    }
		

Читать

Flexbox, теперь понятно

Вадим Макеев, Opera Software

Презентация: pepelsbey.net/pres/flexbox-gotcha

sokr.me/fbx