Why flexbox?
In a nutshell, flexbox provides simpler and more flexible layout options in CSS. More specifically, it provides:
- Easy vertical alignment of content within a parent element.
- Easy reordering of content across devices and screen resolutions with the help of media queries.
- Easy CSS-only equal height columns for your grid-based layouts.
- No need to clear floats.
- Can I use flexbox?
- flexbox guide by css-tricks.com
- Flexbox by scotch.io
- the-echoplex.net/flexyboxes/
.flex-container {
display: flex; /* flex | inline-flex */
flex-direction: row; /* row | row-reverse | column | column-reverse */
flex-wrap: wrap; /* wrap | nowrap | wrap-reverse */
justify-content: space-around; /* flex-start | flex-end | center | space-between | space-around */
align-items: flex-start; /* flex-start | flex-end | center | baseline | stretch */
align-content: flex-start; /* flex-start | flex-end | center | space-between | space-around | stretch */
}
.flex-item {
order: 1; /* 2 | -1 */
flex-grow: 0; /* 1 | 2 */
flex-shrink: 1; /* 2 | 3 */
flex-basis: auto;
align-self: auto; /* flex-start | flex-end | center | baseline | stretch */
}
some css:
.fx-grid {
/*display: -ms-flexbox;
display: -webkit-flex;*/
display: flex; /* flex | inline-flex */
/*-ms-flex-direction: row;
-webkit-flex-direction: row;*/
flex-direction: row; /* row | row-reverse | column | column-reverse */
flex-wrap: wrap; /* wrap | nowrap | wrap-reverse */
/*-webkit-justify-content: space-around;
/*-ms-justify-content: center;*/
justify-content: space-around; /* flex-start | flex-end | center | space-between | space-around */
/*align-items: stretch; /* flex-start | flex-end | center | baseline | stretch */
/*align-content: stretch; /* flex-start | flex-end | center | space-between | space-around | stretch */
}
Links:
- Flexbox in the CSS specifications
- A Complete Guide to Flexbox by Chris Coyier
- Designing CSS Layouts With Flexbox
- Can I use css flexbox
- Flexbox Playground
- Flexy Boxes
- Solved-by-flexbox project
- The latest W3.org flexbox spec
Flexbox games: