Knock-knock Flexbox

Что под капотом?

			<div class="container">
			    <div class="item">x</div>
			    <div class="item">x</div>
			    <div class="item">x</div>
			    <div class="item">x</div>
			</div>
		

			.container {
			    overflow:hidden;
			    height:640px;
			    }
			    .container .item {
			        float:left;
			        }
		

Flexbox.On()

			
			.container {
			    display:flex;
			    }
		

Дайте мне точку опоры

			
			.container {
			    display:flex;
			    flex-direction:row; /* по умолчанию */
			                  :row-reverse;
			    }
		

Повернем ось

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

Дайте мне точку опоры

			
			.container {
			    display:flex;
			    flex-direction:column-reverse;
			    }
		

По ширине

			
			.container {
			    justify-content:flex-start; /* по умолчанию */
			                    center;
			                    flex-end;
			    }
		

Равномерно:

			
			.container {
			    justify-content:space-between;
			                    space-around;
			    }
		

По высоте

			
			.container {
			    align-items:flex-start; /* по умолчанию */
			                flex-end;
			                center;
			    }
		

Персонально

			
			.container .item:nth-child(1) {
			    align-self:flex-start;
			    }
			.container .item:nth-child(4) {
			    align-self:flex-end;
			    }
		

Как:

			
			.container {
			    display:flex;
			    }
		

	
			.item {
			    margin:auto;
			    }
		

Порастягиваем

			.container .item {
			    flex-grow:1;
			    }
		

Персонально

			.container div {
			    flex-grow:1;
			    }
			.container .item:nth-child(1) {
			    flex-grow:4;
			    }
		

Посжимаем

			
			.container .item:nth-child(1) {
			    flex-shrink:4;
			    }
		

Похомячим

			.container .item {
			    flex-grow:1;
			    }
			.container .item:nth-child(1) {
			    flex-basis:250px;
			    }
		

Поменяем порядок:

			
			.container .item:nth-child(2) {
			    order:1;
			    }
		

Попереносим

			.container {
			    display:flex;
			    flex-wrap:nowrap; /* по умолчанию */
			             :wrap;
			    }
		

А что если... все было наоборот?

			.container {
			    display:flex;
			    flex-wrap:wrap-reverse;
			    }
		

Поперек

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

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

Flexbox.On()

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

Flexbox.Reverse()

		
			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;
			    }
		

BackToBasic.Native()

		
			E {	
			    display: table;
			    }
		

		
			E .item {	
			    display: table-cell;
			    width: 50%;
			    }
		

Что почитать?

• caniuse.com
• css-tricks.com
• developer.mozilla.org
• msdn.microsoft.com
• Why Flexboxes Aren't Good for Page Layout
• Google =)