scss Flexbox前缀

Posted 2021-05-18

/***************************
 * Flexbox layout mixins
 *
 * more info, read css-tricks
 * https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 * https://css-tricks.com/using-flexbox/
 *
 ***************************/
 
 
/**
 * enable flexbox layout on the parent
 */
@mixin flexbox(){
    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;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

/**
 * the individual flex element
 *
 * @param flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
 */
@mixin flex( $flex ){
    -webkit-flex: $flex;
        -ms-flex: $flex;
            flex: $flex;
}

/**
 * Tell the flex items to wrap to the next line
 */
@mixin flex-wrap(){
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;    
            flex-wrap: wrap;
}

/**
 * Center the flex items on the cross axis
 */
@mixin flex-center(){
    -webkit-align-items: center;
      -webkit-box-align: center;
         -ms-flex-align: center;
            align-items: center;
}

/**
 * Centers flex items along the main axis
 */
@mixin flex-justify-center() {
  -webkit-justify-content: center;
         -webkit-box-pack: center;
            -moz-box-pack: center;
            -ms-flex-pack: center;
          justify-content: center;
}

/**
 * Sets the main axis to Y
 */
@mixin flex-flow-column() {
  -webkit-flex-flow: column;
      -ms-flex-flow: column;
          flex-flow: column;
}

/**
 * Sets the position of an individual flex item
 *
 * @param $position: auto | flex-start | flex-end | center | baseline | stretch;
 */
@mixin flex-item-align-self($position) {
  -ms-flex-item-align: $position;
   -webkit-align-self: $position;
           align-self: $position;
}


/**************************
 * Utilities
 **************************/

/**
 * Set this on a parent element to center it's immediate children in absolute middle
 */
@mixin center-child(){
    @include flexbox();
    @include flex-center();
}