CSS3 Flexbox - LESS Mixins

flexbox.less

// --------------------------------------------------
// Flexbox LESS mixins
// The spec: http://www.w3.org/TR/css3-flexbox
// --------------------------------------------------

// Flexbox display
// flex or inline-flex
.flex-display(@display: flex) {
	display: ~"-webkit-@{display}";
	display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
	display: ~"-ms-@{display}"; // IE11
	display: @display;
}

// The 'flex' shorthand
// - applies to: flex items
// <positive-number>, initial, auto, or none
.flex(@columns: initial) {
  -webkit-flex: @columns;
      -ms-flex: @columns;
          flex: @columns;
}

// Flex Flow Direction
// - applies to: flex containers
// row | row-reverse | column | column-reverse
.flex-direction(@direction: row) {
  -webkit-flex-direction: @direction;
      -ms-flex-direction: @direction;
          flex-direction: @direction;
}

// Flex Line Wrapping
// - applies to: flex containers
// nowrap | wrap | wrap-reverse
.flex-wrap(@wrap: nowrap) {
  -webkit-flex-wrap: @wrap;
      -ms-flex-wrap: @wrap;
          flex-wrap: @wrap;
}

// Flex Direction and Wrap
// - applies to: flex containers
// <flex-direction> || <flex-wrap>
.flex-flow(@flow) {
  -webkit-flex-flow: @flow;
      -ms-flex-flow: @flow;
          flex-flow: @flow;
}

// Display Order
// - applies to: flex items
// <integer>
.flex-order(@order: 0) {
  -webkit-order: @order;
      -ms-order: @order;
          order: @order;
}

// Flex grow factor
// - applies to: flex items
// <number>
.flex-grow(@grow: 0) {
  -webkit-flex-grow: @grow;
      -ms-flex-grow: @grow;
          flex-grow: @grow;
}

// Flex shrink
// - applies to: flex item shrink factor
// <number> 
.flex-shrink(@shrink: 1) {
  -webkit-flex-shrink: @shrink;
      -ms-flex-shrink: @shrink;
          flex-shrink: @shrink;
}

// Flex basis
// - the initial main size of the flex item
// - applies to: flex items
// <width> 
.flex-basis(@width: auto) {
  -webkit-flex-basis: @width;
      -ms-flex-basis: @width;
          flex-basis: @width;
}

// Axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | space-between | space-around 
.justify-content(@justify: flex-start) {
  -webkit-justify-content: @justify;
      -ms-justify-content: @justify;
          justify-content: @justify;
}

// Packing Flex Lines
// - applies to: multi-line flex containers
// flex-start | flex-end | center | space-between | space-around | stretch 
.align-content(@align: stretch) {
  -webkit-align-content: @align;
      -ms-align-content: @align;
          align-content: @align;
}

// Cross-axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | baseline | stretch 
.align-items(@align: stretch) {
  -webkit-align-items: @align;
      -ms-align-items: @align;
          align-items: @align;
}

// Cross-axis Alignment
// - applies to: flex items
// auto | flex-start | flex-end | center | baseline | stretch 
.align-self(@align: auto) {
  -webkit-align-self: @align;
      -ms-align-self: @align;
          align-self: @align;
}

@pafnuty thanks, removed the -moz- prefix

I found this pretty awesome set of mixins, note the IE 10 fixes. This helps to make sure that IE10 which uses a different implementation also works as on other browsers.

http://www.flexdatabases.com/templates/flex_template/css/old.less

This is easily written into you're normal mixins to maintain uniformity between IE10 and newer browsers. So far this has been working well for me:

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

.mixin-justify-content(@justify) when (@justify = flex-start) {
    -ms-flex-pack: start;
}
.mixin-justify-content(@justify) when (@justify = flex-end) {
    -ms-flex-pack: end;
}
.mixin-justify-content(@justify) when (@justify = space-between) {
    -ms-flex-pack: justify;
}

.mixin-align-items(@align-item) when (@align-item = flex-start) {
    -ms-flex-align: start;
}
.mixin-align-items(@align-item) when (@align-item = flex-end) {
    -ms-flex-align: end;
}
.mixin-align-items(@align-item) when (@align-item = stretch) {
    -ms-flex-align: stretch;
}

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

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

An example SCSS of the combination:

@mixin flex-direction($direction: row) {
  -webkit-flex-direction: $direction;
      -ms-flex-direction: $direction;
          flex-direction: $direction;
}

@mixin flex-wrap($wrap: nowrap) {
  @if $wrap == nowrap {
    -ms-flex-wrap: none;
  }
  @else {
    -ms-flex-wrap: $wrap;
  }
  -webkit-flex-wrap: $wrap;
          flex-wrap: $wrap;
}

@mixin flex-order($order: 0) {
  -ms-flex-order: $order;
  -webkit-order: $order;
      -ms-order: $order;
          order: $order;
}

@mixin justify-content($justify: flex-start) {
  @if $justify == flex-start {
    -ms-flex-pack: start;
  }
  @else if $justify == flex-end {
    -ms-flex-pack: end;
  }
  @elseif $justify == space-between {
    -ms-flex-pack: justify;
  }
  @else {
    -ms-flex-pack: $justify;
  }
  -webkit-justify-content: $justify;
      -ms-justify-content: $justify;
          justify-content: $justify;
}

@mixin align-items($align: auto) {
  @if $align == flex-start {
    -ms-flex-align: start;
  }
  @else if $align == flex-end {
    -ms-flex-align: end;
  }
  @else {
    -ms-flex-align: $align;
  }
  -webkit-align-items: $align;
      -ms-align-items: $align;
          align-items: $align;
}

@mixin align-content($align: auto) {
  @if $align == flex-start {
    -ms-flex-line-pack: start;
  }
  @else if $align == flex-end {
    -ms-flex-line-pack: end;
  }
  @else {
    -ms-flex-line-pack: $align;
  }
  -webkit-align-content: $align;
      -ms-align-content: $align;
          align-content: $align;
}

@mixin align-self($align: auto) {
  @if $align == flex-start {
    -ms-flex-item-align: start;
  }
  @else if $align == flex-end {
    -ms-flex-item-align: end;
  }
  @else {
    -ms-flex-item-align: $align;
  }
  -webkit-align-self: $align;
      -ms-align-self: $align;
          align-self: $align;
}

@mixin flex($value){
  -webkit-box-flex: $value;
  -moz-box-flex: $value;
  -webkit-flex: $value;
  -ms-flex: $value;
  flex: $value;
}

@mixin flex-display($important: false){
  @if ($important) {
    display: -webkit-box!important;
    display: -moz-box!important;
    display: -ms-flexbox!important;
    display: -webkit-flex!important;
    display: flex!important;
  }
  @else {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  }
}

Thank you for help !

I found this pretty awesome set of mixins, note the IE 10 fixes. This helps to make sure that IE10 which uses a different implementation also works as on other browsers.
https://sclinbio.com/

echo "# sclin" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/sclinbio/sclin.git
git push -u origin main
git remote add origin https://github.com/sclinbio/sclin.git
git branch -M main
git push -u origin main

THIS IS VERY USEFULL BLOG INFOMATION WAS AMAZING WOW https://sclinbio.com/

import React from 'react'; const EmailTemplate = () => { return ( {/* StartFragment /} <style type="text/css"> {<!-- td { border: 1px solid #cccccc; } br { mso-data-placement: same-cell; } -->} </style>

Dear,

I hope this message finds you well. My name is elite furnaces, and I represent Elite Furnaces, a leading provider of premium heating solutions based in the UK. I am reaching out to you today to explore the possibility of establishing a mutually beneficial partnership through a backlink exchange.

At Elite Furnaces, we take immense pride in our commitment to excellence in providing top-of-the-line furnaces designed to enhance home comfort and efficiency for our customers throughout the UK. With a focus on innovation, reliability, and sustainability, our furnaces are engineered to deliver optimal performance while reducing energy consumption and environmental impact.

As we strive to expand our online presence and connect with homeowners, contractors, and industry professionals who share our passion for quality heating solutions, we recognize the value of collaborating with reputable websites like yours. Your platform resonates with our target audience, and we believe that featuring a backlink to Elite Furnaces would provide your readers with valuable insights into the latest advancements in home heating technology.

By incorporating a backlink to our website within relevant content on your platform, you not only enhance the user experience by offering authoritative resources but also contribute to our collective goal of promoting sustainable and efficient heating solutions across the UK.

In return, we are more than happy to reciprocate with a backlink to your website from our platform, further enriching the exchange of valuable information and resources within our respective communities.

We understand the importance of maintaining the integrity and quality of your content, and we assure you that the inclusion of our backlink will seamlessly align with the interests and preferences of your audience.

Thank you for considering our proposal. We are eager to discuss this opportunity further and explore how we can collaborate to create meaningful value for both our audiences.

Please feel free to reach out to me directly with any questions or to discuss potential collaboration opportunities in more detail. I look forward to hearing from you soon. Visit Elite Furnaces

Warm regards,

elite furnaces

{/ EndFragment */} ); }; export default EmailTemplate;

VERY NICE AND SIMPLE WRITE THE CODE EXCELLENT I LOVE THIS JAYJI VERY USE LOVE THANK YOU FOR SHARING DEAR Visit Elite Furnaces