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 в браузерах
• Таблица соответствия F09 и F11
• Таблица соответствия F09 и F11 для IE10
• CSS3 Flexplorer
• Использование Flexbox от Mozilla
• Руководство по Flexbox от Microsoft

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

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

• @pepelsbey
• pepelsbey.net
• pepelsbey@gmail.com

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

sokr.me/fbx