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 */ } |
html:
<div class="container"> <section> <img src="http://lorempixel.com/300/300/" width="200" height="300" /> </section> <section> <img src="http://lorempixel.com/400/300/" width="400" height="300" /> </section> <section> <img src="http://lorempixel.com/500/300/" width="500" height="300" /> </section> <section> <img src="http://lorempixel.com/350/300/" width="350" height="300" /> </section> <section> <img src="http://lorempixel.com/450/300/" width="450" height="300" /> </section> </div> |
css:
.container { display: flex; align-items: center; justify-content: center; width: 600px; } section { transition: all 0.3s ease; height: 250px; margin: 0; display: flex; flex-flow: column; justify-content: flex-end; /* make 1 flex unit wide */ flex: 1; overflow: hidden; } section img { height: 300px; } section:hover { /* take up two flex units when hovering */ flex: 2; } |
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 support for Internet Explorer 8 & 9
Flexbox games: