This document provides information and examples on how to use CSS Flexbox for layout. It demonstrates how to set up a flex container and items, control flex direction and wrapping, set sizes and alignments, and change item order. It also includes browser support information and links to additional Flexbox resources.

2. •
•

3. -
-
-

4. -
-

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

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

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

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

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

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

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

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

28. <div class="container">
<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;
}

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

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

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

42. 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/