Skip to content

Instantly share code, notes, and snippets.

@chand

chand/flexbox-basics.md

Last active August 26, 2017 15:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save chand/191bbe26053301aaf5a5de24c0078076 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save chand/191bbe26053301aaf5a5de24c0078076 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. chand revised this gist Aug 26, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion flexbox-basics.md
    View file
    Original file line number Diff line number Diff line change
    @@ -17,7 +17,7 @@ align-items:
    align-content:
    ```

    ###Flex Items:
    ### Flex Items:
    ```
    order:
    align-self:
  2. chand revised this gist Aug 26, 2017. 1 changed file with 22 additions and 22 deletions.
    44 changes: 22 additions & 22 deletions flexbox-basics.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,12 @@
    #Flexbox Basics
    # Flexbox Basics

    ##Overview
    ## Overview

    <img src="http://samserif.co/lib/teaching/flexbox-class-slides/images/flexbox-main.png" width="600px">



    ###Flex Container:
    ### Flex Container:
    ```
    display:
    flex-direction:
    @@ -27,38 +27,38 @@ flex-basis:
    flex:
    ```

    ##Flex Container Properties
    ## Flex Container Properties
    Control the direction of flex items within the parent container.

    ###Add the following code at the top of any container css to "activate" flexbox:
    ### Add the following code at the top of any container css to "activate" flexbox:
    ```
    display: flex;
    ```

    ###Set the direction of the box, options are (row is default):
    ### Set the direction of the box, options are (row is default):
    ```
    flex-direction: row;
    flex-direction: row-reverse;
    flex-direction: column;
    flex-direction: column-reverse;
    ```

    ###Set the wrap properties of the box (nowrap is default):
    ### Set the wrap properties of the box (nowrap is default):
    ```
    flex-wrap: nowrap;
    flex-wrap: wrap;
    flex-wrap: nowrap-reverse;
    ```

    ###Flex-Flow is a short hand which sets both flex-direction and flex-wrap at once:
    ### Flex-Flow is a short hand which sets both flex-direction and flex-wrap at once:
    ```
    flex-flow: row nowrap;
    flex-flow: column wrap;
    ```

    ##Control the direction of flex items along main and cross axes
    ## Control the direction of flex items along main and cross axes

    ###Main Axis/Left to Right(flex-start is default):
    ### Main Axis/Left to Right(flex-start is default):
    ```
    justify-content: flex-start;
    justify-content: flex-end;
    @@ -67,15 +67,15 @@ justify-content: space-between;
    justify-content: space-around;
    ```

    ###Cross Axis/Top to Bottom (stretch is default):
    ### Cross Axis/Top to Bottom (stretch is default):
    ```
    align-items: stretch;
    align-items: flex-start;
    align-items: flex-end;
    align-items: center;
    align-items: baseline;
    ```
    ###Cross Axis for content with more than one line (stretch is default):
    ### Cross Axis for content with more than one line (stretch is default):
    ```
    align-content: stretch;
    align-content: flex-start;
    @@ -85,16 +85,16 @@ align-content: space-between;
    align-content: space-around;
    ```

    ##Flex Item Properties
    ## Flex Item Properties
    Overrides position of individual flex items along main or cross axis

    ###To change order of appearance (not actual HTML order):
    ### To change order of appearance (not actual HTML order):
    ```
    order: 1;
    ```
    Value can be any positive of negative integer

    ###To override align-items position on cross axis
    ### To override align-items position on cross axis
    ```
    align-self: flex-start;
    align-self: flex-end;
    @@ -103,45 +103,45 @@ align-self: stretch;
    align-self: baseline;
    ```

    ###Override justify-content positioning on main exis to fill extra space:
    ### Override justify-content positioning on main exis to fill extra space:
    ```
    margin-left: auto;
    margin-right: auto;
    ```

    ##Control the amount of space flex items will grow or shrink to fill based on container size
    ## Control the amount of space flex items will grow or shrink to fill based on container size

    ###Flex Grow
    ### Flex Grow
    Specifies the flex grow factor of a flex item. Default is 0.
    ```
    flex-grow: 0;
    flex-grow: [any integer];
    flex-grow: auto;
    ```

    ###Flex Shrink
    ### Flex Shrink
    Specifies the flex shrink factor of a flex item. Default is 1.
    ```
    flex-shrink: 1;
    flex-shrink: [any integer];
    flex-shrink: auto;
    ```

    ###Flex Basis
    ### Flex Basis
    Specifies the initial size of the flex item, before any available space is distributed according to the flex factors. Default is 0.
    ```
    flex-basis: 0;
    flex-basis: [any integer];
    flex-basis: auto;
    ```

    ###Shorthand
    ### Shorthand
    flex-grow value / flex-shrink value / flex-basis value
    ```
    flex: 0 1 0;
    ```

    ###Useful default values for flex values
    ### Useful default values for flex values
    ```
    flex: initial;
    //equivalent to flex: 0 1 auto;
  3. chand revised this gist Nov 16, 2016. 1 changed file with 2 additions and 3 deletions.
    5 changes: 2 additions & 3 deletions flexbox-basics.md
    View file
    Original file line number Diff line number Diff line change
    @@ -33,8 +33,8 @@ Control the direction of flex items within the parent container.
    ###Add the following code at the top of any container css to "activate" flexbox:
    ```
    display: flex;
    ```

    ###Set the direction of the box, options are (row is default):
    ```
    flex-direction: row;
    @@ -56,7 +56,7 @@ flex-flow: row nowrap;
    flex-flow: column wrap;
    ```

    Control the direction of flex items along main and cross axes
    ##Control the direction of flex items along main and cross axes

    ###Main Axis/Left to Right(flex-start is default):
    ```
    @@ -86,7 +86,6 @@ align-content: space-around;
    ```

    ##Flex Item Properties

    Overrides position of individual flex items along main or cross axis

    ###To change order of appearance (not actual HTML order):
  4. chand revised this gist Nov 16, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion flexbox-basics.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@

    ##Overview

    [<img src="http://samserif.co/lib/teaching/flexbox-class-slides/images/flexbox-main.png" width="400px">]
    <img src="http://samserif.co/lib/teaching/flexbox-class-slides/images/flexbox-main.png" width="600px">



  5. chand created this gist Nov 16, 2016.
    161 changes: 161 additions & 0 deletions flexbox-basics.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,161 @@
    #Flexbox Basics

    ##Overview

    [<img src="http://samserif.co/lib/teaching/flexbox-class-slides/images/flexbox-main.png" width="400px">]



    ###Flex Container:
    ```
    display:
    flex-direction:
    flex-wrap:
    flex-flow:
    justify-content:
    align-items:
    align-content:
    ```

    ###Flex Items:
    ```
    order:
    align-self:
    flex-grow:
    flex-shrink:
    flex-basis:
    flex:
    ```

    ##Flex Container Properties
    Control the direction of flex items within the parent container.

    ###Add the following code at the top of any container css to "activate" flexbox:
    ```
    display: flex;
    ```
    ###Set the direction of the box, options are (row is default):
    ```
    flex-direction: row;
    flex-direction: row-reverse;
    flex-direction: column;
    flex-direction: column-reverse;
    ```

    ###Set the wrap properties of the box (nowrap is default):
    ```
    flex-wrap: nowrap;
    flex-wrap: wrap;
    flex-wrap: nowrap-reverse;
    ```

    ###Flex-Flow is a short hand which sets both flex-direction and flex-wrap at once:
    ```
    flex-flow: row nowrap;
    flex-flow: column wrap;
    ```

    Control the direction of flex items along main and cross axes

    ###Main Axis/Left to Right(flex-start is default):
    ```
    justify-content: flex-start;
    justify-content: flex-end;
    justify-content: center;
    justify-content: space-between;
    justify-content: space-around;
    ```

    ###Cross Axis/Top to Bottom (stretch is default):
    ```
    align-items: stretch;
    align-items: flex-start;
    align-items: flex-end;
    align-items: center;
    align-items: baseline;
    ```
    ###Cross Axis for content with more than one line (stretch is default):
    ```
    align-content: stretch;
    align-content: flex-start;
    align-content: flex-end;
    align-content: center;
    align-content: space-between;
    align-content: space-around;
    ```

    ##Flex Item Properties

    Overrides position of individual flex items along main or cross axis

    ###To change order of appearance (not actual HTML order):
    ```
    order: 1;
    ```
    Value can be any positive of negative integer

    ###To override align-items position on cross axis
    ```
    align-self: flex-start;
    align-self: flex-end;
    align-self: center;
    align-self: stretch;
    align-self: baseline;
    ```

    ###Override justify-content positioning on main exis to fill extra space:
    ```
    margin-left: auto;
    margin-right: auto;
    ```

    ##Control the amount of space flex items will grow or shrink to fill based on container size

    ###Flex Grow
    Specifies the flex grow factor of a flex item. Default is 0.
    ```
    flex-grow: 0;
    flex-grow: [any integer];
    flex-grow: auto;
    ```

    ###Flex Shrink
    Specifies the flex shrink factor of a flex item. Default is 1.
    ```
    flex-shrink: 1;
    flex-shrink: [any integer];
    flex-shrink: auto;
    ```

    ###Flex Basis
    Specifies the initial size of the flex item, before any available space is distributed according to the flex factors. Default is 0.
    ```
    flex-basis: 0;
    flex-basis: [any integer];
    flex-basis: auto;
    ```

    ###Shorthand
    flex-grow value / flex-shrink value / flex-basis value
    ```
    flex: 0 1 0;
    ```

    ###Useful default values for flex values
    ```
    flex: initial;
    //equivalent to flex: 0 1 auto;
    flex: auto;
    //equivalent to flex: 1 1 auto;
    flex: none;
    //equivalent to flex: 0 0 auto;
    flex: integer;
    //equivalent to flex: [integer] 1 0;
    ```