Estelle Weyl

www.standardista.com
@estellevw
@standardista

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;

From 2012. The spec syntax changed drastically.

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)

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

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

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

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

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

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

aligns flex items

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

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

Only applies to multi-line flex containers.

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

Override the align-items on a per flex item basis

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.

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

Thanks!

www.standardista.com
@estellevw
@standardista