Skip to content

Instantly share code, notes, and snippets.

@dr2009

dr2009/android-flex.css

Forked from HeGanjie/android-flex.css
Created June 20, 2016 04:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dr2009/5169b419628ea66a7f913c979f4ccbbe to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dr2009/5169b419628ea66a7f913c979f4ccbbe to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @HeGanjie HeGanjie revised this gist Feb 4, 2015. 1 changed file with 7 additions and 0 deletions.
    7 changes: 7 additions & 0 deletions android-flex.css
    View file
    Original file line number Diff line number Diff line change
    @@ -123,6 +123,13 @@
    -webkit-order: 2;
    order: 2
    }*/
    .flex--flex-grow-all > * {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1
    }
    .flex--flex-grow-last :last-child {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
  2. @HeGanjie HeGanjie revised this gist Feb 4, 2015. 1 changed file with 10 additions and 2 deletions.
    12 changes: 10 additions & 2 deletions android-flex.css
    View file
    Original file line number Diff line number Diff line change
    @@ -122,14 +122,22 @@
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2
    }*/
    .flex--flex-grow-last :last-child {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1
    }
    .flex--flex-grow {

    .flex--flex-grow-middle :nth-child(2) {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1
    }*/
    }

    .flex-center-wrapper {
    display: -webkit-box;
  3. @HeGanjie HeGanjie revised this gist Jan 28, 2015. 1 changed file with 34 additions and 14 deletions.
    48 changes: 34 additions & 14 deletions android-flex.css
    View file
    Original file line number Diff line number Diff line change
    @@ -13,7 +13,7 @@
    -moz-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
    flex-direction: row-reverse;
    }

    .flex--row {
    @@ -23,7 +23,7 @@
    -moz-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
    flex-direction: column;
    }

    .flex--row.flex--reverse {
    @@ -33,87 +33,87 @@
    -moz-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse
    flex-direction: column-reverse;
    }

    .flex--justify-content--space-between {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
    justify-content: space-between;
    }

    .flex--justify-content--space-around {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
    justify-content: space-around
    justify-content: space-around;
    }

    .flex--justify-content--center {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center
    justify-content: center;
    }

    .flex--justify-content--start {
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start
    justify-content: flex-start;
    }

    .flex--justify-content--end {
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end
    justify-content: flex-end;
    }

    .flex--align-items--start {
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start
    align-items: flex-start;
    }

    .flex--align-items--end {
    -webkit-box-align: end;
    -moz-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end
    align-items: flex-end;
    }

    .flex--align-items--center {
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center
    align-items: center;
    }

    .flex--align-items--baseline {
    -webkit-box-align: baseline;
    -moz-box-align: baseline;
    -ms-flex-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline
    align-items: baseline;
    }

    .flex--align-items--stretch {
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch
    align-items: stretch;
    }

    /*.flex--flex-order {
    @@ -129,4 +129,24 @@
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1
    }*/
    }*/

    .flex-center-wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    }
  4. @HeGanjie HeGanjie created this gist Jan 28, 2015.
    132 changes: 132 additions & 0 deletions android-flex.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,132 @@
    .flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    }

    .flex.flex--reverse {
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -moz-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
    }

    .flex--row {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
    }

    .flex--row.flex--reverse {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-direction: reverse;
    -moz-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse
    }

    .flex--justify-content--space-between {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
    }

    .flex--justify-content--space-around {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
    justify-content: space-around
    }

    .flex--justify-content--center {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center
    }

    .flex--justify-content--start {
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start
    }

    .flex--justify-content--end {
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end
    }

    .flex--align-items--start {
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start
    }

    .flex--align-items--end {
    -webkit-box-align: end;
    -moz-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end
    }

    .flex--align-items--center {
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center
    }

    .flex--align-items--baseline {
    -webkit-box-align: baseline;
    -moz-box-align: baseline;
    -ms-flex-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline
    }

    .flex--align-items--stretch {
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch
    }

    /*.flex--flex-order {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2
    }
    .flex--flex-grow {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1
    }*/