Flexbox

Flex containers automatically convert their direct children into flex items, but not deeper descendants. Flexboxes can be nested.

Elements line up from top to bottom by default. Flex items can line up from either axis and from either direction, defaulting to from left to right.

display: blox (Default, Block Layout Mode)

A

B

C

D

E
display: flex (Flex Layout Mode)

A

B

C

D

E

flex-direction

flex-direction: row (default)

A

B

C

D

E
flex-direction: row-reverse

A

B

C

D

E
flex-direction: column

A

B

C

D

E
flex-direction: column-reverse

A

B

C

D

E

flex-wrap 1/2

(flex-direction: row)

flex-wrap: nowrap (default)

A

B

C

D

E

A

B

C

D

E
flex-wrap: wrap

A

B

C

D

E

A

B

C

D

E
flex-wrap: wrap-reverse

A

B

C

D

E

A

B

C

D

E

flex-wrap 2/2

(flex-direction: column)

flex-wrap: nowrap (default)

A

B

C

D

E

A

B

C

D

E
flex-wrap: wrap

A

B

C

D

E

A

B

C

D

E
flex-wrap: wrap-reverse

A

B

C

D

E

A

B

C

D

E

flex-flow: flex-direction flex-wrap

(shortcut)

flex-flow: column wrap

justify-content (flex-direction: row)

justify-content: flex-start (default)

A

B

C

D

E
justify-content: flex-end

A

B

C

D

E
justify-content: center

A

B

C

D

E
justify-content: space-between

A

B

C

D

E
justify-content: space-around

A

B

C

D

E

justify-content (flex-direction: column)

justify-content: flex-start (default)

A

B

C

D

E
justify-content: flex-end

A

B

C

D

E
justify-content: center

A

B

C

D

E
justify-content: space-between

A

B

C

D

E
justify-content: space-around

A

B

C

D

E

align-items (row)

align-item: stretch (default)

A

B

C

D

E
align-item: flex-start

A

B

C

D

E
align-item: flex-end

A

B

C

D

E
align-item: center

A

B

C

D

E
align-item: baseline

A

B

C

D

E

align-items (column)

align-item: stretch (default)

A

B

C

D

E
align-item: flex-start

A

B

C

D

E
align-item: flex-end

A

B

C

D

E
align-item: center

A

B

C

D

E
align-item: baseline

A

B

C

D

E

align-self

align-self: flex-start

A

B

C

D

E
align-self: flex-end

A

B

C

D

E
align-self: center

A

B

C

D

E
align-self: baseline

A

B

C

D

E
align-self: flex-start

A

B

C

D

E

align-content (flex-direction: row)

The effect of this property can only be observed when the flex container is set to 'flex-wrap: wrap' and the flex items wrap around to multiple lines.

align-content: stretch (default)

A

B

C

D

E

A

B

C

D

E
align-content: flex-start

A

B

C

D

E

A

B

C

D

E
align-content: flex-end

A

B

C

D

E

A

B

C

D

E
align-content: center

A

B

C

D

E

A

B

C

D

E
align-content: space-around

A

B

C

D

E

A

B

C

D

E
align-content: space-between

A

B

C

D

E

A

B

C

D

E

align-content (flex-direction: column)

align-content: stretch (default)

A

B

C

D

E

A

B

C

D

E
align-content: flex-start

A

B

C

D

E

A

B

C

D

E
align-content: flex-end

A

B

C

D

E

A

B

C

D

E
align-content: center

A

B

C

D

E

A

B

C

D

E
align-content: space-around

A

B

C

D

E

A

B

C

D

E
align-content: space-between

A

B

C

D

E

A

B

C

D

E

Aligning Items with Margins

Default

A

B

C

D

E
margin-right: auto (A)

A

B

C

D

E
margin-left: auto (C)

A

B

C

D

E
margin-right: auto; margin-left: auto (C)

A

B

C

D

E
margin-top: auto (E)

A

B

C

D

E

flex: flex-grow flex-shrink flex-basis (shortcut)

This property applies to flex items, not flex containers. Though this property is a shortcut for the three properties 'flex-grow', 'flex-shrink', and 'flex-basis', is it highly recommended to always use 'flex' in order to avoid conflicting default values.

The order of the properties matters for flex. Grow and shrink properties behave like True/False booleans. 1 = on, 0 = off. flex-basis sets the starting dimensions, either to a specific size or a size based on the contents.

Example

List item starts at 200px wide. It is allowed to expand to fill extra space (1), but it is not allowed to shrink (0) narrower than 200px.

li {flex: 1 0 200px; }

flex-grow

Default is 0, which means the item is not permitted to grow wider than the size of its content or its specified width. Having this turned off allows alignment properties to work, but if it is turned on, any extra space is filled, making alignment obsolete.

Assigning a higher flex-grow integer to an item makes it behave as a ratio. In the third example here, 'C' has 3 times more space than the other items, which are set to '1'.

flex-grow: 0 (default)

0

0

0

0

0
flex-grow: 1

1

1

1

1

1
flex-grow: 3 (C)

1

1

3

1

1

flex-shrink

flex-shrink: 0

0

0

0

0

0
flex-shrink: 1 (default)

1

1

1

1

1
flex-shrink: integer

2

1

4

1

1

flex-basis

Defines the starting size of the item before any wrapping, growing, or shrinking occurs. This can be used instead of the width/height property for flex items. Flex settings also override specified width/height properties for items.

flex-basis: auto (default)

A

B

C

D

E
flex-basis: 100px

A

B

C

D

E
flex-basis: 50px (A)
flex-basis: 100px (B, C, D)
flex-basis: 200px (E)

A

B

C

D

E

flex shortcuts

flex: initial (flex: 0 1 auto)
Prevents the flex item from growing even when there is extra space, but allows it to shrink to fit in the container. Size is based on specified width/height properties, defauting to the size of the content. Justify-content can be used for horizontal alignment.

A

B

C

D

E
flex: auto (flex: 1 1 auto)

Allows items to be fully fexible, growing or shrinking as needed. Size is based on specified width/height properties.

A

B

C

D

E
flex: none (flex: 0 0 auto)

Creates a completely inflexible flex item, sizing to specified width/height properties. Justify-content can be used for alignment.

A

B

C

D

E
flex: integer (flex: integer 1 0px)

Creates a flexible item with the flex basis of 0. This means the flex item has absolute flex, and free space is allocated according to the flex number applied to items

Relative flex assigns extra space to items based on the size of the flex item's contents, and it applies to flex items with a flex-basis set to a size other than 0, such as with a width/height value or auto.

Absolute flex assigns extra size proportionally according to universal flex ratios. It applies to flex items with a flex-basis of 0. It is recommended to always inlude a unit after the 0, like 0px or 0%.

1

1

1

1

1

1

1

1

1

1

Top row has flex: 1, so it has absolute flex applied. Bottom row is included for comparison. It has flex: 1 1 auto, so it has relative flex applied.

order

The default is order: 0, upon which items will be ordered according to their semantic order. If multiple items have the same order number, it will refer to the semantic order to decide priority. Positive and negative values can both be used. The behavior is somewhat similar to z-index. However, the higher the number, the further pushed down it is, not higher.

order: 1 (A)
order: -1 (E)

A

B

C

D

E

Grid

Grid track sizes can be specified in many ways, include: absolute units, relative units, percentages, and newer Grid-specific values. Examples: fr unit, minmax() function, auto, and content-based values min-content/max-content. repeat() function, optional auto-fill and auto-fit values.

display: grid
display: inline-grid
grid container
grid item (direct children of grid container)
grid line
grid cell
grid area
grid track

Grid Example
grid-template-rows: 50px 200px 50px; grid-template-columns: 100px 250px 100px;

A

B

C

D

E

A

B

C

D
Grid Items Less Than Grid Cells

A

B

C

D

E
Grid Items More Than Grid Cells

A

B

C

D

E

A

B

C

D

E
Absolute Values

A

B

C

D

E

A

B

C

D
Absolute and Relative Values
grid-template-rows: 1fr 200px 1fr; grid-template-columns: 100px 1fr 100px;

A

B

C

D

E

A

B

C

D
Relative Values
grid-template-rows: 1fr 2fr 1fr; grid-template-columns: 1fr 2fr 1fr;

A

B

C

D

E

A

B

C

D
minmax()
grid-template-rows: 50px 200px 50px; grid-template-columns: 100px minmax(15em, 30em) 100px

A

B

C

D

E

A

B

C

D
min-content, max-content
grid-template-rows: min-content 200px 50px; grid-template-columns: max-content min-content 100px;
The min-content, max-content, and auto values size tracks based on the size of the content within it. The min-content value is the smallest that a track can get without overflowing. The max-content property allots the maximum amount of space needed for the content, even if that means extending the track beyond the boundaries of the grid container. When used as a column width, the column track will be as wide as the widest possible content in t hat track without line wrapping. Auto lets the browser make their 'best judgment' on how to best fit the content while still considering other restrictions in place. minmax() behaves like minmax(min-content, max-content).

The rules continue, but it's rather fussy and complex, so I'll leave the details be for now. p457.

The min-content, max-content, and auto values size tracks based on the size of the content within it.

C

The max-content property allots the maximum amount of space needed for the content, even if that means extending the track beyond the boundaries of the grid container.

The min-content value is the smallest that a track can get without over-flowing.

A

B

C

D
repeat()
grid-template-rows: repeat(2, 50px 8em); grid-template-columns: repeat(2, 20px 1fr);

A

B

C

D

E

A

B

C

D

E

A

B

C

D

E
repeat(auto-fill, length), repeat(auto-fit, length)
grid-template-rows: repeat(auto-fill, 100px 50px); grid-template-columns: repeat(auto-fill, 100px 50px);

A

B

C

D

E

A

B

C

D

E

A

B

C

D

E

why is row repeat auto-fill not working beyond the first two rows? =w= also, auto-fit fits here too. they are very similar.
grid-template-areas
grid-template-rows: [header-start] 50px [content-start] 200px [footer-start] 50px; grid-template-columns: [ads] 100px [main] 1fr [links] 100px; grid-template-areas: "header header header" ". main links" "footer footer footer"

A

B

C

D

E

A

B

C

D
grid (shortcut)

Two shortcuts for grid are 'grid' and 'grid-template'. Of the two, using 'grid' is the recommended option unless you want some specific cascading behavior from grid-template. Additionally, neither shortcut should be used for anything except the most simple grids, as more complex grids become much harder to manage with the shortcut style.
grid: [header-start] "header header header" 50px [content-start] ". main links" 200px [footer-start] "footer footer footer" 50px /[.] 200px [main] 1fr [links] 100px;

Placing Grid Items

grid-row-start grid-row-end grid-column-start grid-column-end grid-row grid-column grid-area grid-auto-rows grid-auto-columns grid-auto-flow

Spacing and Alignment

grid-row-gap grid-column-gap grid-gap justify-self align-self justify-items align-items justify-content align-content

Flexbox

display: blox (Default, Block Layout Mode)

display: flex (Flex Layout Mode)

flex-direction

flex-direction: row (default)

flex-direction: row-reverse

flex-direction: column

flex-direction: column-reverse

flex-wrap 1/2

(flex-direction: row)

flex-wrap: nowrap (default)

flex-wrap: wrap

flex-wrap: wrap-reverse

flex-wrap 2/2

(flex-direction: column)

flex-wrap: nowrap (default)

flex-wrap: wrap

flex-wrap: wrap-reverse

flex-flow: flex-direction flex-wrap

(shortcut)

flex-flow: column wrap

justify-content (flex-direction: row)

justify-content: flex-start (default)

justify-content: flex-end

justify-content: center

justify-content: space-between

justify-content: space-around

justify-content (flex-direction: column)

justify-content: flex-start (default)

justify-content: flex-end

justify-content: center

justify-content: space-between

justify-content: space-around

align-items (row)

align-item: stretch (default)

align-item: flex-start

align-item: flex-end

align-item: center

align-item: baseline

align-items (column)

align-item: stretch (default)

align-item: flex-start

align-item: flex-end

align-item: center

align-item: baseline

align-self

align-self: flex-start

align-self: flex-end

align-self: center

align-self: baseline

align-self: flex-start

align-content (flex-direction: row)

align-content: stretch (default)

align-content: flex-start

align-content: flex-end

align-content: center

align-content: space-around

align-content: space-between

align-content (flex-direction: column)

align-content: stretch (default)

align-content: flex-start

align-content: flex-end

align-content: center

align-content: space-around

align-content: space-between

Aligning Items with Margins

Default

margin-right: auto (A)

margin-left: auto (C)

margin-right: auto; margin-left: auto (C)

margin-top: auto (E)

flex: flex-grow flex-shrink flex-basis (shortcut)

Example

flex-grow

flex-grow: 0 (default)

flex-grow: 1

flex-grow: 3 (C)

flex-shrink

flex-shrink: 0

flex-shrink: 1 (default)

flex-basis: 50px (A)
flex-basis: 100px (B, C, D)
flex-basis: 200px (E)

order: 1 (A)
order: -1 (E)