Flexbox
Modern CSS Layouting
A brief history
- Tables
- Floats
- Framework grids
Overview
- Native support
- IE10+ (with caveats)
- Vendor prefixes required
But what is it?
- Layouting method
- Efficient way align / distribute space for dynamic items in a container
- Content-based widths / heights
- Aligned along an axis
- http://codepen.io/anon/pen/zBQrNy
It's all about the container
- display: flex on parent
- Enables flex context for direct children
- flex-direction sets the main axis
- Default is row (X-axis)
- Switching to column sets X-axis as main and Y-axis as cross
- Reverse is an option
It's all about the container
- Distribute elements
- justify-content on parent justifies content across main axis
- space-between, space-around, flex-end, flex-start, center
- justify-content on parent justifies content across main axis
- Align items to each other
- align-items on parent aligns items on cross axis
- center, flex-start, flex-end, stretch
- align-items on parent aligns items on cross axis
Child properties
- Properties can be set on a child-by-child basis as well
- flex-grow
- default is 0
- How much an element will "grow" relative to other items
- Often set to 1 to take up remaining space
Child properties
- flex-basis
- Sets size of content box
- Default is auto
- Can be a way to set a pre-determined "width" on a flex context item
- Flex-grow: 1; flex-basis: 0; creates equal width columns
Child properties
- flex-wrap
- Sets if elements should be forced into one line on main axis, or if they're allowed to wrap
- Default is nowrap
Child properties
- flex-wrap
- Sets if elements should be forced into one line on main axis, or if they're allowed to wrap
- Default is nowrap
Real world applications
http://lacksvalley-content.adagetech.net/
http://ncreif.adagetech.net/
http://lacksvalley-content.adagetech.net/en/locations/
file://store/Graphics/+%20Creative%20Resources/FED/FED%20Code%20Exercise/FED%20Example%20Exercises/Emily/index.html
How do I know if I'm doing it wrong?
- If you've set loads of flex properties take a step back
- Often time, setting a few parent properties is all you need!
- Think about content flexibility - what if the text / image place in an element is a different length / size?
What if I'm lazy?
- Use a pre-defined mixin that matches the component type
- Set up with any necessary parameters
- Logic related to margins / responsive is done
- store/Graphics/+%20Creative%20Resources/
- FED/FED%20Project%20Setup/sassdoc/index.html
Further Reading
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- https://www.smashingmagazine.com/2015/03/harnessing-flexbox-for-todays-web-apps/
- http://flexboxin5.com/
- http://flexboxfroggy.com/
Flexbox
By ehayman
Flexbox
- 1,691