CSS

Flexbox Introduction

Regular div container:

Flex Containers

On the container: display: flex or display: inline-flex

Default properties on the container:

• flex-direction: row
• The items start from the start edge of the main axis.
• All direct children will be flex items

Default properties of the flex items:

• flex-grow: 0
• flex-shrink: 1
• The items will stretch to fill the size of the cross axis.
• flex-basis: auto
  Browser will look if the items have a size. For example: width: 100px. Then it will be used as the flex-basis. If the don't, the content size will be used.
• flex-wrap: nowrap

Flex Items

Easiest way to make the flex items stretches evenly: flex: 1. Apply it on each item.

Complex nesting multiple box

With just those simple declarations, we can create a complex nesting multiple flexbox.

Growing and shrinking

flex is actually a shorthand for flex-grow, flex-shrink, and flex-basis.
The standard value is flex: 0 1 0%.
When declared only with 1 value, it's referring to the flex-grow:
flex: 1
Meaning: grow each child box equally and it is actually flex: 1 1 0%.

• flex-grow
  • The value is the growth factor. It is a single number.
  • Default value is 0. That's why without declaration, flex item border will wrap arpund the content.
  • flex: 1 to each flex item div: they will grow equally, to the exact same size
  • flex: 2 to 1 item div and flex: 1 to the rest: that box will grow twice wider than each of the rest.
• flex-shrink
  • Similar to flex-grow, but for shrinking.
  • Only applied when all flex items size is larger than the container.
  • Default value is 1. Meaning every flex item will be shrinking evenly further declaration.
  • Specify flex-shrink: 0 when you don't want a flex item to shrink
• flex-basis
  • Sets the initial size of a flex item. Growing and shrinking start from this baseline.
  • Default value is auto, which mean will acknowledge width declaration of the flex item.
  • Remember flex: 1 means flex: 1 1 0, meaning we set it to 0, meaning we ignore the declared width. Meaning flex items will be growing or shrinking evenly according to the growth/shrink factor.
  • flex: 1 1 auto will take declared width into consideration.
  • Can actually be set in px too.

Predefined flex shorthand values

• flex: initial
  Equals to flex: 0 1 auto, the initial value.
  Can only shrink from the existing base values can grow.
  A

  B

  C
• flex: auto
  Equals to flex: 0 1 auto.
  Like flex: initial, but can grow too.
  A

  B

  C
• flex: none
  Equals to flex: 0 0 auto.
  Following the existing base values, can't shrink or grow.
  A

  B

  C
• flex: num+ with num+ is any positive number
  Equals to flex: num+ num+ 0.
  Disregard existing base value, use num+ as growing and shrinking factor.
A
B
C

Axis

There are 2 axis in the flexbox system: main axis (row) and cross axis (column), and each axis can have 2 directions: regular and reverse.

• Main axis: Row

  Main axis, the row, depends on the writing direction of the language.
  In English sites: horizontal.
  • flex-direction: row
    This is the default.
    A

    B

    C
  • flex-direction: row-reverse
    A

    B

    C

• Cross axis: Column

  Perpendicular to main axis, we have cross axis, the column.
  In English sites: vertical.
  Note: When the axis is vertical, the flex-basis referred to height instead of width.
  • flex-direction: column
    A

    B

    C
  • flex-direction: column-reverse
    A

    B

    C

Note on height of a vertical flexbox

For vertical flexbox, pay attention to the height and flex declaration. When working with horizontal flexbox, shorthand flex: 1 in items is enough to make a smooth flexbox. This code will collapse empty item box in vertical flexbox because it sets the flex-basis at 0, which means it will ignore the predefined height. If the container doesn't have defined height either, and all the item boxes are empty, the container will collapse. This doesn't happen in horizontal box, just in vertical box, because a box by standard stretches horizontally to available space, the whole width, while it stretches vertically only onto the extend of content or predefined height.

So, pay attention to:

• Container's height
• Items' height
• flex shorthand: consider declare flex-basis separately

flex-wrap: wrap

By default, items will be shrinking when there's no enough horizontal space in the container. If we want the items size to be respected and goes to the next line, use flex-wrap: wrap. Below is an example. Shrink and stretch the window horizontally to see the effect.

The default value is flex-wrap: nowrap btw, in which items will be shrinking instead. The problem is, overflow can happen if items are not able to shrink or can't shrink small enough to fit.

Exercise box