📖 Flexbox
Flexbox is a new layout mode in CSS3 that allows for flexible layouts that respond to changes in page width without using floats. It consists of flex containers and flex items. To create a flex container add display: flex; to the css.
There are a couple of good basic resources online you should be aware. The first is at W3 Schools to introduce Flexbox. W3 Schools gives a good basic introduction. There are numerous other tutorials online, but one I think does a good job of giving some detailed examples for using Flexbox is at CSS-Tricks. There are additional resources linked at the bottom of this article you might also want to review.
display: -webkit-flex;is required for Safari.- The children of a flex container are automatically flex items.
- Flex items will shrink and grow to fill the size of the container
- Flex items are positioned along a main axis and a cross axis.
- flex-direction establishes the direction of the main and cross axis.
flex-direction: row;sets the main axis to horizontal and the cross axis to vertical.flex-direction: column;sets the main axis to vertical and the cross axis to horizontal.
Parent (Container) Properties
Display
display: flex;
/* Creates a flex container rendered as a block container. */
display: -webkit-flex;
/* Creates a block container for Safari browser */
display: inline-flex;
/* Flex container rendered as inline container */
display: -webkit-inline-flex;
/* Creates an inline container for Safari browser */Direction
flex-direction [-webkit-flex-direction]
/* Specifies the direction of the flexible items inside the flex container. */
flex-direction: row;
/* (default)left-to-right, top-to-bottom (main axis horizontal) */
flex-direction: row-reverse;
/* If the writing-mode (direction) is left to right, the flex items will be laid out right to left (main axis horizontal) */
flex-direction: column;
/* If the writing system is horizontal, the flex items will be laid out vertically (main axis vertical) */
flex-direction: column-reverse;
/* Same as column, but reversed - bottom to top (main axis vertical) */Wrap
flex-wrap [-webkit-flex-wrap]
/* vertically aligns the flexible container's items when the items do not use all available space on the cross-axis. */
flex-wrap: nowrap;
/* (default) Items are squished to fit in the container width on a single row. */
flex-wrap: wrap;
/* Items wrap to multiple lines if they do not fit in the width of the container */
flex-wrap: wrap-reverse;
/* Items wrap to multiple lines in reverse order */Flow
flex-flow [-webkit-flex-flow]
flex-flow: row wrap;
/* A combination of flex-direction and flex-wrap */Justify Content
justify-content [-webkit-justify-content]
/* Aligns the flexible container's items when the items do not use all available space on the main-axis. */
justify-content: flex-start;
/* (default) Items are positioned at the beginning of the container */
justify-content: flex-end;
/* Items are positioned at the end of the container */
justify-content: center;
/* Items are positioned at the center of the container */
justify-content: space-between;
/* Items are positioned with space between the lines */
justify-content: space-around;
/* Items are positioned with space before, between, and after the lines */Align Items
align-items [-webkit-align-items]
/* aligns the flexible container's items when the items do not use all available space on the cross-axis. */
align-items: stretch;
/* (default) Items are stretched to fit the container */
align-items: flex-start;
/* Items are positioned at the top of the container */
align-items: flex-end;
/* Items are positioned at the bottom of the container */
align-items: center;
/* Items are positioned at the center of the container (vertically) */
align-items: baseline;
/* Items are positioned at the baseline of the container */Align Content
align-content [-webkit-align-content]
/* Modifies the behavior of the flex-wrap property. */
/* It is similar to align-items, but instead of aligning flex items, it aligns flex lines. */
align-content: stretch;
/* (default) Lines stretch to take up the remaining space. */
align-content: flex-start;
/* Lines are packed toward the start of the flex container. */
align-content: flex-end;
/* Lines are packed toward the end of the flex container. */
align-content: center;
/* Lines are packed toward the center of the flex container. */
align-content: space-between;
/* Lines are evenly distributed in the flex container. */
align-content: space-around;
/* Lines are evenly distributed in the flex container, with half-size spaces on either end. */Child (Item) Properties
Flex
flex [-webkit-flex]
flex: 0 1 auto;
/* Specifies the length of the flex item, relative to the rest of the flex items inside the same container. */
/* Can have up to 3 values: flex-grow flex-shrink flex-basis */
/* flex-grow and flex-shrink are positive numbers relative to other children in the same flex container */
/* flex-basis is the default size of the element in lengths (20%, 5em, etc.) or auto */Order
order [-webkit-order]
order: 3;
/* specifies the order of a flexible item relative to the rest of the flexible items inside the same container. */
/* positive or negative numeric value */Align Items
align-self [-webkit-align-self]
align-self: auto | flex-start | flex-end | center | baseline | stretch;
/* Overrides the flex container's align-items property for that item. */
/* same values as the align-items property */Additional Resources
A quick look at flexbox (3:48s):
http://www.sketchingwithcss.com/flexbox/
Position items within a flexbox container (3:51):
http://www.sketchingwithcss.com/flex-container
Control your rows and columns (2:32):
http://www.sketchingwithcss.com/flex-container-2/
Drink a little more coffee and then grow and shrink flex items (6:19):
http://www.sketchingwithcss.com/grow-shrink/
Implement the Sticky Footer and Holy Grail layout, infamous for being tricky to do - but not with flexbox (6:00):
http://www.sketchingwithcss.com/flex-layouts/
Flexbox Cheatsheet
http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
Flexbox Froggy
http://flexboxfroggy.com/
Examples
Flexbox can be used in a variety of ways. One way is to use it to layout an entire page. The example below demonstrates how to create a multi-column page layout using Flexbox.