Flexbox - верстка без float'ов by Dmitry Radyno

.container {
display: flex;
}
<div class="container">
<div class="item">...</div>
<div class="item">...</div>
</div>

.container {
flex-direction: row; /* row-reverse | column | column-reverse */
}

.container {
display: flex;
justify-content: center;
align-items: center;
}
<div class="item">
I'm align center<br>
It's not a miracle!
</div>
</div>

.item {
flex-basis: 200px;
flex-grow: 1;
flex-shrink: 1;
}
.item {
flex: 1 1 200px;
}

<div class="item small">I'm 200px by default</div>
<div class="item big">I'm 400px by default</div>
</div>
.container {
display: flex;
width: 1000px;
}
.item.small {
flex: 1 1 200px;
}
.item.big {
flex: 1 1 400px;
}

</div>
.container {
display: flex;
width: 1000px;
}
.item.small {
flex: 1 1 200px;
}
.item.big {
flex: 3 1 400px;
}

</div>
.container {
display: flex;
width: 700px;
}
.item.small {
flex: 1 1 200px;
}
.item.big {
flex: 1 1 400px;
}

.container {
flex-direction: row;
flex-wrap: wrap;
}
. container {
flex-flow: row wrap;
}
.container {
flex-direction: column;
flex-wrap: nowrap;
}
. container {
flex-flow: column nowrap;
}

<div class="item first">I'm the first</div>
<div class="item second">I'm the second</div>
<div class="item third">I'm the third</div>
</div>
.item.first {
order: 2;
}
.item.second {
order: 3;
}
.item.third {
order: 1;
}

.container {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
align-content: stretch;
}
.item {
flex: 1 1 auto;
order: 2;
}

HTTP://CODEPEN.IO/RADYNO/PEN/FRXTA
HTTP://CODEPEN.IO/RADYNO/PEN/AWGLP

.container {
display: -webkit-flexbox;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
justify-content: flex-end;
-ms-flex-pack: end;
flex-pack: end;
-ms-flex-line-pack: distribute;
flex-line-pack: distribute;
align-content: space-around;
}
.item {
-webkit-flex: 1 1 100px;
-ms-flex: 1 1 100px;
flex: 1 1 100px;
-ms-flex-order: -1;
flex-order: -1;
order: -1;
}

HTTP://HTML5.BY/BLOG/FLEXBOX/
HTTP://CSS-TRICKS.COM/SNIPPETS/CSS/A-GUIDE-TO-FLEXBOX/
HTTP://CSS-TRICKS.COM/USING-FLEXBOX/
HTTP://CANIUSE.COM/#FEAT=FLEXBOX
HTTPS://GITHUB.COM/POSTCSS/AUTOPREFIXER
HTTP://WWW.W3.ORG/TR/CSS3-FLEXBOX/

Flexbox - верстка без float'ов by Dmitry Radyno

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Flexbox - верстка без float'ов by Dmitry Radyno (20)

Recently uploaded (20)

Flexbox - верстка без float'ов by Dmitry Radyno