Seven Things You Should Know About Flexbox.
Flexbox is a great CSS module for making clean and flexible layouts. But flexbox is a bit odd, it can be tricky to get the results you're looking for when you're just getting started. Here are some things you should know about flexbox:
display: flex;goes on a parent element. Then all children of that element become flex items and will accept other flex properties.
- Don't use
box-sizing: border-box;with flex elements. It won't work they way that you'd expect from display or inline elements.
rowto lay flex elements out horizontally. Sometimes, you want
columnto lay elements out vertically instead.
margin-[side]: auto;makes the margin use up all the available space on that side. If multiple margins (in the same dimension) are
auto, they each take an even share of the available space
0;where elements won't grow beyond the content's width. You probably want
flex-grow: 1. Among other things, this handy for making all input elements stretch to use up the remaining space: http://codepen.io/matuzo/pen/eJYdWV?editors=110
nowrap, where all elements will be stuffed on a single line (or a single column, for
flex-direction: column;). Alternately, you may want
flex-wrap: wrap;to allow the elements to flow to multiple rows.
- Flexbox is well-supported in all recent versions of Firefox, Chrome, Safari, Chrome, Edge, mobile browsers, and even passably-well supported in IE. See http://caniuse.com/#feat=flexbox.
For more about
- http://flexboxin5.com/ (Backup mirror: https://github.com/cvan/flexboxin5)
Tags: code css css3 flexbox responsive