Skip to content

Latest commit

 

History

History
234 lines (162 loc) · 4.41 KB

flexbox.md

File metadata and controls

234 lines (162 loc) · 4.41 KB
Raw

Flexbox

Gives the ability for a container to alter its items' width and height to best fill available space

A flex container expands items to fill available free space, and shrinks to prevent overflow

Links

Axis

CROSS AXIS | | | | | | | - - - MAIN AXIS - - - | | | | | | |

Activate

display: flex;

This is now the 'flex container'

Its children are now 'flex items'

Alignment

  • flex-direction

    • determines how flex items are placed in the flex container
    • values;
      • row (default)
      • column

  • justify-content

    • align flex items on main axis (left and right)
    • values;
      • flex-start (default)
        • | * * * |
      • flex-end
        • | * * * |
      • center
        • | * * * |
      • space-between
        • | * * * |
      • space-around
        • | * * * |

  • align-items

    • align flex items on cross axis (up and down)
    • values;
      • stretch (default)
        • | * * * |
        • | * * * |
        • | * * * |
        • | * * * |
      • flex-start
        • | * * * |
        • | * * |
        • | * |
      • flex-end
        • | * |
        • | * * |
        • | * * * |
      • center
        • | * |
        • | * * * |
        • | * |

  • flex-wrap

    • determines if flex items are forced into single line (default) or can wrap onto multiple lines
    • values;
      • nowrap (default)
      • wrap

  • align-content

    • align multiple lines within a flex container by cross axis (up and down)
    • values;
      • stretch (default)
      • flex-start
      • flex-end
      • center
      • space-between
      • space-around

Align single items

Use align-self or margin

.left {
   align-self: flex-start;
}

.right {
   margin-left: auto;
}

Item properties

These properties go onto a flex items, but can also be set and inherited from flex container

flex-basis

The starting size (but not guaranteed end size) of an element before grow / shrink come into play

  • auto (default) = according to its content, or its width or height (and related) properties
  • 0 = adhere to flex-grow value
  • value (eg: 10em, 3px, etc)
    • override calculated width with new value (by content or width / height properties)
    • generally requires flex-shrink to be disabled to strictly adhere to this

flex-grow

Grow item relative to other items in container

  • 0 (default) = do not stretch to fill available space
  • 1 = stretch to fill available space
  • number (eg: 3, 0.6)
    • represents growth factor of item relative to other flex items
    • eg: a flex-grow: 2 can grow to twice as big as flex-grow: 1

flex-shrink

  • 1 (default) = shrink
    • May override specified flex-basis / width / height
  • 0 = do not shrink below initial size

Flex shorthand

The above can be manipulated with the shorthand flex property

THREE VALUES

Shorthand

flex: <flex-grow> <flex-shrink> <flex-basis>

DEFAULT / INITIAL

  • Initial size respected = yep

  • Grow into extra space = nope

  • Shrink if needed = yep

    flex: initial

    OR

    flex: 0 1 auto

FLEX AUTO

  • Grow into extra space = yep

    flex: auto

    OR

    flex: 1 1 auto

    OR

    flex-grow: 1

FLEX NONE

  • Shrink if needed = nope

    flex: none

    OR

    flex: 0 0 auto

    OR

    flex-shrink: 0

SINGLE NUMBER

Shorthand to set flex-grow to value, and flex-basis: 0

  • Initial size respected = nope

  • Grow into extra space = yep, relative to other items flex-grow value

    flex: 5

    OR

    flex: 5 1 0

    OR

    flex-grow: 5 flex-basis: 0

Gotchas

The following properties have no effect on flex items:

  • float
  • vertical-align

IE10-11

  • 3rd param in flex shorthand (flex-basis) must be unitless
  • min-height of parent ignored

Misc

  • Margins of flex items do not ever collapse
  • The default value of auto means flex cannot go below the length of the longest text. Override with min-width: 0.
  • display: inline-flex on an item to prevent it from being a block, but remain flex