Skip to content

Instantly share code, notes, and snippets.

@codler

codler/flex.less

Last active October 7, 2023 07:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save codler/2148ba4ff096a19f08ea to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save codler/2148ba4ff096a19f08ea to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. codler revised this gist May 24, 2014. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions flex.less
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,7 @@
    /*! Prefix flex for IE10 and Safari / iOS in LESS
    * https://gist.github.com/codler/2148ba4ff096a19f08ea
    * Copyright (c) 2014 Han Lin Yap http://yap.nu; MIT license */

    .display(@value) when (@value = flex) {
    display: -ms-flexbox; // IE10
    display: -webkit-flex; // Safari / iOS
  2. codler created this gist May 24, 2014.
    134 changes: 134 additions & 0 deletions flex.less
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,134 @@
    .display(@value) when (@value = flex) {
    display: -ms-flexbox; // IE10
    display: -webkit-flex; // Safari / iOS
    }

    .display(@value) when (@value = inline-flex) {
    display: -ms-inline-flexbox; // IE10
    display: -webkit-inline-flex; // Safari / iOS
    }

    .display(@value) {
    display: @value;
    }

    .flex(@value) {
    -ms-flex: @value;
    -webkit-flex: @value;
    flex: @value;
    }

    .flex-justify-content(@justifyContent) {
    .ms-flex-justify-content(@justifyContent); // IE10
    -webkit-justify-content: @justifyContent; // Safari / iOS
    justify-content: @justifyContent;
    }

    .flex-align-content(@alignContent) {
    .ms-flex-align-content(@alignContent); // IE10
    -webkit-align-content: @alignContent; // Safari / iOS
    align-content: @alignContent;
    }

    .flex-align-items(@alignItems) {
    .ms-flex-align-items(@alignItems); // IE10
    -webkit-align-items: @alignItems; // Safari / iOS
    align-items: @alignItems;
    }

    .flex-align-self(@alignSelf) {
    .ms-flex-align-self(@alignSelf); // IE10
    -webkit-align-self: @alignSelf; // Safari / iOS
    align-self: @alignSelf;
    }

    .flex-direction(@direction) {
    -ms-flex-direction: @direction; // IE10
    -webkit-flex-direction: @direction; // Safari / iOS
    flex-direction: @direction;
    }

    .flex-order(@order) {
    -ms-flex-order: @order; // IE10
    -webkit-order: @order; // Safari / iOS
    order: @order;
    }

    .flex-wrap(@wrap) {
    .ms-flex-wrap(@wrap); // IE10
    -webkit-flex-wrap: @wrap; // Safari / iOS
    flex-wrap: @wrap;
    }

    /* These are the conditional mixins for the different syntax for IE10 Flexbox */
    .ms-flex-justify-content(@justifyContent) when (@justifyContent = space-between) {
    -ms-flex-pack: justify;
    }

    .ms-flex-justify-content(@justifyContent) when (@justifyContent = space-around) {
    -ms-flex-pack: distribute;
    }

    .ms-flex-justify-content(@justifyContent) when (@justifyContent = flex-start) {
    -ms-flex-pack: start;
    }

    .ms-flex-justify-content(@justifyContent) when (@justifyContent = flex-end) {
    -ms-flex-pack: end;
    }

    .ms-flex-justify-content(@justifyContent) when (@justifyContent = center) {
    -ms-flex-pack: center;
    }

    .ms-flex-align-content(@alignContent) when (@alignContent = space-between) {
    -ms-flex-line-pack: justify;
    }

    .ms-flex-align-content(@alignContent) when (@alignContent = space-around) {
    -ms-flex-line-pack: distribute;
    }

    .ms-flex-align-content(@alignContent) when (@alignContent = flex-start) {
    -ms-flex-line-pack: start;
    }

    .ms-flex-align-content(@alignContent) when (@alignContent = flex-end) {
    -ms-flex-line-pack: end;
    }

    .ms-flex-align-content(@alignContent) when (@alignContent = center), (@alignContent = stretch) {
    -ms-flex-line-pack: @alignContent;
    }

    .ms-flex-align-items(@alignItems) when (@alignItems = flex-start) {
    -ms-flex-align: start;
    }

    .ms-flex-align-items(@alignItems) when (@alignItems = flex-end) {
    -ms-flex-align: end;
    }

    .ms-flex-align-items(@alignItems) when (@alignItems = center), (@alignItems = baseline), (@alignItems = stretch) {
    -ms-flex-align: @alignItems;
    }

    .ms-flex-align-self(@alignSelf) when (@alignSelf = flex-start) {
    -ms-flex-item-align: start;
    }

    .ms-flex-align-self(@alignSelf) when (@alignSelf = flex-end) {
    -ms-flex-item-align: end;
    }

    .ms-flex-align-self(@alignSelf) when (@alignSelf = auto), (@alignSelf = center), (@alignSelf = baseline), (@alignSelf = stretch) {
    -ms-flex-item-align: @alignSelf;
    }

    .ms-flex-wrap(@wrap) when (@wrap = nowrap) {
    -ms-flex-wrap: none;
    }

    .ms-flex-wrap(@wrap) when (@wrap = wrap), (@wrap = wrap-reverse) {
    -ms-flex-wrap: @wrap;
    }