CSS: Flexbox

Why?

Problem we're trying to solve

Flex Box

Flex Box

Flex Box

Flex Box

Fixed Header and Footer

Flex Box

Browser Support

Browser support

Flex Box Specification

CSS Flexible Box Layout Module Level 1

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 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 | space-evenly
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 | space-evenly
min-height
Default is auto, not 0
min-width
Default is auto, not 0
order
Integer. Controls order of flex item within flex container

The Basics

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 | flex | inline-flex | grid | inline-grid | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby | ruby-base | ruby-text | ruby-base-container | ruby-text-container | contents | none | flow | flow-root

display property

inline | block | list-item | inline-block | flex | inline-flex | grid | inline-grid | table | inline-table | ruby | none

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. white space

Kind of

  1. absolutely/fixed positioned elements

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

The Flex Container

Controlling Flex Items

From the flex container

justify-content property

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly

aligns flex items along the main axis

justify-content property

align-items property

  • flex-start
  • flex-end
  • center
  • baseline
  • stretch

aligns flex items along the cross axis

align-items property

Impact of visibility: collapse

align-content property

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • stretch
  • space-evenly

Only applies to multi-line flex containers.

align-content property

Flex Items

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

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

Flexibility

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

Tables

Next ➹

Links