Skip to content

Instantly share code, notes, and snippets.

@cyaenorama

cyaenorama/flexbox.css

Forked from brettsnippets/flexbox.css
Created August 19, 2017 07:52
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save cyaenorama/8d28590968b45e6da34235a5df630459 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cyaenorama/8d28590968b45e6da34235a5df630459 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @brettsnippets brettsnippets revised this gist Jul 1, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion flexbox.css
    View file
    Original file line number Diff line number Diff line change
    @@ -7,7 +7,7 @@
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-drirection: column;
    flex-direction: column;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
  2. @brettsnippets brettsnippets created this gist Jun 29, 2013.
    35 changes: 35 additions & 0 deletions flexbox.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@
    .content {
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-drirection: column;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    box-orient: vertical;
    width: 100%;
    }

    .main, .sidebar {
    width: 100%;
    }

    .main {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
    }
    .sidebar {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
    }