CSS: Flexbox

CSS: Flexbox

Wonderfully Terrific Features

What The @#$%?

Problem we're trying to solve

↪

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

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.

Actual Flex Box

CSS Flexible Box Layout Module

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

So simple...

↪

Remember?

↪

Components of Flexbox

  1. Direction: flex-flow row | row-reverse | column | column-reverse
  2. Alignment: justify-content, align-items, align-self, align-content
  3. Ordering: order
  4. Flexibility: flex

Flexible Box Model: Final

Related properties:

display
Values include flex and inline-flex. Used on parent to create the flex container.
align-content
align-items
align-self
flex
Shorthand for [flex-basis flex-grow, and flex-shrink, or none
flex-basis
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
min-height
min-width
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

↪

flex-direction property

row | row-reverse | column | column-reverse

flex-driection: ...

↪

flex-wrap property

nowrap | wrap | wrap-reverse

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

flex-wrap: ...

↪

flex-flow property

Shorthand for flex-direction and flex-wrap

flex-flow: ...

↪

"But wait, there's more!"

--Ed Valenti

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: ...

↪

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 gotcha!

↪

justify-content property

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

aligns flex items

justify-content property

↪

align-items, align-content properties

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

align-items property

↪

Remember This?

  • 1
  • 1
  • 2
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
  • 4
ul {
  display: flex;
}
li {
  flex: 1;
}

Flex Box

↪

Home ➹