CSS: Flexbox

Flexbox: WTF

Flexbox: Wonderfully Terrific Features

Flexbox: What The @#$%?

With Unicorns and Kittens, of course.

Problem we're trying to solve

Flex Box

Flex Box

Flex Box

Flex Box

Fixed Header and Footer

Flex Box

Browser support

Flexible Box Model: V1

display: box ;
box-orient:  horizontal | vertical | inherit;

box-pack: start | end | center | justify;

box-align: start | end | center | baseline | stretch;

box-flex: integer | 0;

box-flex-group

box-ordinal-group

box-direction: normal | reverse | inherit;

box-lines:

Flexible Box Model: V2 (IE Only)

display: flexbox | inline-flexbox;
flex-direction: lr | rl | tb | bt | inline |
    inline-reverse | block | block-reverse

flex-order: integer | 1;

flex-pack: start | end | center | justify;

flex-align: auto | baseline;

From 2012. The spec syntax changed drastically.

Final Flex Box?

CSS Flexible Box Layout Module

dev.w3.org/csswg/css-flexbox/

Candidate Recommendation: Jan-05-2016

So simple...

Holy Grail Layout

Components of Flexbox

  1. Creation: display
  2. Direction: flex-flow (flex-direction, flex-wrap)
  3. Alignment: justify-content, align-items, align-self, align-content
  4. Ordering: order
  5. Flexibility: flex (flex-grow, flex-shrink, flex-basis)

Flexible Box Model: Final

Related properties:

display
Values include flex and inline-flex. Used on parent to create the flex container.
align-content
flex-start | flex-end | center | space-between | space-around | stretch
align-items
flex-start | flex-end | center | baseline | stretch
align-self
auto | flex-start | flex-end | center | baseline | stretch
flex
Shorthand for [flex-basis flex-grow, and flex-shrink, or none
flex-basis
The basis by which the flex-items flex. default: auto
flex-direction
Set the containers axis for its children with row, row-reverse, column or columns-reverse on the parent
flex-flow
Shorthand for flex-direction and flex-wrap properties.
flex-grow
Positive number determines how much flex item will grow relative to other flex items in flex container when positive free space is distributed. default is 1 for container. 0 for children. Positive only
flex-shrink
Positive number determines how much flex item will shrink relative to other flex items in flex container when negative free space is distributed. default is 1
flex-wrap
To determine whether the boxes are single line or wrap, and the direction, use nowrap, wrap or wrap-reverse
justify-content
flex-start | flex-end | center | space-between | space-around
min-height
Default is auto, not 0
min-width
Default is auto, not 0
order
Integer. Controls order of flex item within flex container

Steps

  1. Add display: flex; to the parent of the elements to be flexed.
  2. Set flex-direction to horizontal or vertical
  3. Set flex-wrap to control wrap direction

display property

inline | block | list-item | inline-list-item | inline-block | table | inline-table | table-cell | table-caption | flex | inline-flex | grid | inline-grid

display: flex;

block-level flex container box

display: inline-flex;

inline-level flex container box

Is Flexbox supported in your browser?

Visit Site

display property

display: inline-flex;

What is a flex item

Flex items

  1. All non-absolutely positioned child nodes
  2. Generated Content
  3. anonymous flex items => non-empty text nodes

Not flex items

  1. ::first-line & ::first-letter
  2. absolutely/fixed positioned elements
  3. white space

Impacted CSS Properties

Changed Properties

  1. margin: adjacent flex items margins do not collapse
  2. min-width & min-height: default is auto, not 0
  3. visibility: collapse;

Ignored Properties

  1. column-* properties
  2. float
  3. clear
  4. vertical-align

flex-direction property

row | row-reverse | column | column-reverse

flex-direction: ...

Flex Box

main-axis

flex-wrap property

nowrap | wrap | wrap-reverse

Purpose: is the whole shebang on one line, or can it wrap if necessary

flex-wrap: ...

Flex Box

flex-flow property

Shorthand for flex-direction and flex-wrap

flex-flow: ...

flex-flow

"But wait, there's more!"

--Ed Valenti

Controlling Flex Items

From the flex container

justify-content property

flex-start | flex-end | center | space-between | space-around

aligns flex items

justify-content property

align-items property

flex-start | flex-end | center | baseline | stretch

align-items property

Impact of visibility: collapse

align-content property

flex-start | flex-end | center | space-between | space-around | stretch

Only applies to multi-line flex containers.

align-content property

Controlling Flex Items

From the flex items themselves

align-self property

auto | flex-start | flex-end | center | baseline | stretch

Override the align-items on a per flex item basis

align-self property

order property

div:nth-of-type(3n) {
   order: -1;
}

The default value is 0. Anything lower will come before those without set values. Anything above will come after.

order: ...

Source Order

<nav> comes after <main>

Accessibility

  1. Source Order
  2. Tab order
  3. Right to Left languages

flex shorthand

flex-grow: How to divide the extra space. Non-negative number. default: 1.

flex-shrink: How to shrink if there's not enough room. Non-negative number. default: 1.

flex-basis: the starting size before free space is distributed. length value, content or auto . If set to auto, sets to flex item’s main size property.

flex shorthand property

flex relative numbers

flex-basis

explanation of the difference between auto and 0 for flex basis

flex-basis

Flex Box

Flex Box