Used to position horizontal and vertical stacks.

.box {
  display: box;
  box-orient:       horizontal       vertical     ;
}
.box .one, .box .two {
  box-flex: 1;
}
.box .three {
  box-flex: 3;
}

• Chrome
• Firefox 2
• Safari 3+
• Android
• Blackberry v7+
• prefix for all. UC Browser for Android 9

.box {
  display: box;
  box-pack: center
    start
    end ;
  box-align: centerstartendstretch;
}

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:

• Quick tutorial
• IE 10 Support

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;

• Chrome
• Safari
• Firefox
• Opera
• IE 10 ONLY, with prefix

v2 = 2012. The spec syntax changed drastically.

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

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

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

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

row | row-reverse | column | column-reverse

nowrap | wrap | wrap-reverse

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

Shorthand for flex-direction and flex-wrap

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.

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

aligns flex items

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

• 1

• 1
• 2

• 1
• 2
• 3

• 1
• 2
• 3
• 4

ul {
  display: flex;
}
li {
  flex: 1;
}

calc()

width: calc(50% - 40px);
background: linear-gradient(
  black calc(50% - 2px),
  white calc(50% - 2px),
  white calc(50% + 2px),
  black calc(50% + 2px));

width of objects:

figure > :not(figcaption) {
  width: calc(100% - 40px);
}

also consider

figure  {
  box-sizing: border-box;
}

box-sizing: content-box | border-box

div {
width: 200px;
height:100px;
padding: 20px;
margin:20px;
border-width: 5px;
}

border-box replicates the old IE box model

min()

width: min(100px, 100%);
width: min(90px + 50px, 30%);

max()

width: max(100px, 100%);
width: max(90px + 50px, 30%)

toggle()

em {
  font-style: toggle(normal, italic);
}

• TOC
• Selectors
• Transforms
• Transition & Animation
• Flexbox
• Gradients
• Summary
• CSS? WTF!