Taming Flexbox

Luke Jackson introduces us to Flexbox, takes us through some real-world examples and gives us advice on how to deal with some of its complexities and quirks.

Transcript

1. Flexbox
2. Imagine that the gods are playing some great game. Let's say a chess game. And you don't know the rules of the game, but you're allowed to look at the board from time to time, in a little corner, perhaps. And from these observations, you try to figure out what the rules of the game are.
4. /** * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * contenteditable attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that are clearfixed. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } /** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .cf { *zoom: 1; }
8. container a thing with things in item a thing in a thing
9. Container Any element with the css property display: flex Has the default properties flex-direction: row flex-wrap: nowrap flex-flow: row nowrap Its contents can be positioned and aligned using the properties align-items: stretch align-content: stretch justify-content: flex-start (these are defaults too) CROSS MAIN
10. Item Any element that is the direct descendant of a flex container. It inherits the shorthand property flex: 0 1 auto Has the default properties flex-grow: 0 flex-shrink: 1 flex-basis: auto order: 0 Its position and alignment can be controlled using the properties align-self: auto margin: 0 CROSS MAIN
11. Viewport
13. Column
14. Row
16. flex-wrap arrangement sizing justify-content align-items flex-shrink align-content flex-direction flex-basis flex-flow flex-grow
18. Flex V1: http://codepen.io/lukejacksonn/pen/3cbf640aab14159ad9ccdf5bbb26f1e9 Flexy Google : http://codepen.io/lukejacksonn/pen/zvbPGb Hero Flex List: http://codepen.io/lukejacksonn/pen/MwKOKR Flex Fix: http://codepen.io/lukejacksonn/pen/dozqVq Flex Gallery: http://codepen.io/lukejacksonn/pen/jbbdgb Oriental Nav: http://codepen.io/lukejacksonn/pen/zGmpxK Carousel: http://codepen.io/lukejacksonn/pen/xwbBXe Masthead: http://codepen.io/lukejacksonn/pen/avzzbv Contact Form: http://codepen.io/lukejacksonn/pen/avGBeP