Foundation CSS Flexbox Mode Sass Reference

Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to lay out nice responsive websites, apps, and emails and can be accessible to any device.

Foundation CSS gives access to a lot of pre-built components, we can easily use them by adding helper classes to different elements. One of those UI components is FlexBox Mode. Flexbox mode replaces Foundation’s traditional method of using floats, vertical alignment, table cells, etc., with flexbox features and it helps us to create a website in an easier way.

Sass Reference:

Variable Used:

Example 1: The following code demonstrates an example of source order.

Sass code:

$flex-source-ordering-count:2;

#item1{
    order:$flex-source-ordering-count;
}

Compiled CSS code:

#item1 {
    order: 2;
}

Output:

 

Example 2:

Sass code:

$flex-source-ordering-count:4;

.item{
    color: white;
    background-color: darkmagenta;
    border: 2px solid rgb(228, 214, 15);
    margin: 10px;
    padding: 5px;
    width: 100px;
    height: 100px;
}

#item-1{
    order:$flex-source-ordering-count;
}

Compiled CSS code:

.item {
  color: white;
  background-color: darkmagenta;
  border: 2px solid rgb(228, 214, 15);
  margin: 10px;
  padding: 5px;
  width: 100px;
  height: 100px;
}

#item-1 {
  order: 4;
}

Output:

 

Reference: https://get.foundation/sites/docs/flexbox-mode.html