Flexbox

flexbox.md

Flexbox

• short for Flexible Box Module
• Flexbox controls positioning in just one dimension at time (row or column). For two dimension control CSS Grid Layout comes in place

flex-direction

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• defaults to row
• when flex direction is set to row the "main axis" is from left to right, and the "cross axis" is from top to bottom
• when flex direction is set to column the "main axis" is from top to bottom, and the "cross axis" is from left to right
• row-reverse and column-reverse reverses the axis

https://codepen.io/anon/pen/MzZBxd?editors=1100 https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-3

flex-wrap

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• defaults to nowrap
• with flex-wrap: nowrap fixed with's that are larger than the container will always scale down to be equal child widths.

https://codepen.io/anon/pen/ZmVjNg?editors=1100 https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-4

justify-content

Answers the question, How are the items on the aligned on the main axis?

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

• defaults to flex-start https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-6

align-items

Answers the question, How are the items on the aligned on the cross axis?

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

baseline example: https://codepen.io/anon/pen/YRgmVN?editors=1100 https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-7

align-content

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

• default is set to stretch
• this property has no effect when there is only one line of flex items.

https://codepen.io/anon/pen/gQEVdv?editors=1100 https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-8

align-self

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

https://codepen.io/anon/pen/gQEVdv?editors=1100 https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-14

flex

• This is the shorthand for flex-grow, flex-shrink and flex-basis combined.
• The second and third parameters (flex-shrink and flex-basis) are optional.
• Default is 0 1 auto.
• All three properties act on the main axis
• setting flex: 1 is shorthand for doing flex-grow: 1; flex-shrink: 1;

flex-grow - When there is extra space, how should the extra space be divided? Default is 0. flex-shrink - When this is not enough space, how should each item be reduced? Default is 1. flex-basis - What ideal size should the item be? Default is auto.

https://codepen.io/anon/pen/gQyJaz?editors=1100

Examples

• nav: https://codepen.io/anon/pen/qQGOPJ?editors=1100