ahmed1490/flex.md

## flex.md

      
    Raw
  

              flex.md
            
          
    #CSS FLEXBOX
Summary of : http://la-cascade.ghost.io/flexbox-guide-complet/
1. Container

1.1 Init flex

display: flex | inline-flex;

1.2 Axis & wraping


flex-direction: row (default) | row-reverse | column | column-reverse
flex-wrap: nowrap (default) | wrap | wrap-reverse

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

1.3 Justify

justify-content: flex-start (default) | flex-end | center | space-between | space-around


1.4 Alignement (on main axis)

align-items: flex-start | flex-end | center | baseline | stretch (default)


align-content: flex-start | flex-end | center | space-between | space-around | stretch (default)


2. Items

2.1 Order

https://developer.mozilla.org/en-US/docs/Web/CSS/order
order: <integer> (defaut: 0)

2.2 Flex

flex-grow: <integer> (defaut: 0)
flex-shrink: <integer> (defaut: 1)
flex-basis: <width> | auto (defaut)

Recommanded syntax
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] (default: 0 1 auto)

2.3 Alignement (on cross axis)

align-self: auto | flex-start | flex-end | center | baseline | stretch (default)