Master Equal‑Width Layouts with Sass Mixins: Flex, Table & Float Techniques

This tutorial series is a practical guide summarizing mobile refactoring experience and analyzing the sandal and sheral UI libraries.

Single line, no spacing division

Using sheral's nav list as an example:

<code>.nav-list{
  @include equal-flex(nav-item);
}
</code>

The

equal-flex

mixin is defined in sandal:

<code>// flex equal division
@mixin equal-flex($children: li) {
  display: flex;
  $childrenEle: li div p a span strong;
  @if index($childrenEle, $children) {
    #{$children} {
      flex: 1;
      width: 1%;
    }
  } @else {
    .#{$children} {
      flex: 1;
      width: 1%;
    }
  }
}
</code>

Parameters can be common elements or a class (the dot is added automatically).

Besides flex, a table‑based equal division mixin

equal-table

is also provided:

<code>// table equal division
@mixin equal-table($children: li) {
  display: table;
  table-layout: fixed;
  width: 100%;
  $childrenEle: li div p a span strong;
  @if index($childrenEle, $children) {
    #{$children} {
      display: table-cell;
    }
  } @else {
    .#{$children} {
      display: table-cell;
    }
  }
}
</code>

Equal spacing with remaining items distributed

For a single line, flex works; for multiple lines older browsers have poor flex support, so float is recommended.

Example using sheral's line equal:

<code>.equal--gap{
  @include line-equal-gap($children: line-equal-item);
}
</code>

The

line-equal-gap

mixin (in sandal) is:

<code>// line equal
@mixin line-equal-gap($gap: 10px, $lr: true, $children: li) {
  display: flex;
  @if $lr {
    padding-left: $gap;
    padding-right: $gap;
  }
  @if $children == li {
    #{$children} {
      flex: 1;
      width: 1%;
      &:not(:first-of-type) {
        margin-left: $gap;
      }
    }
  } @else {
    .#{$children} {
      flex: 1;
      width: 1%;
      &:not(:first-of-type) {
        margin-left: $gap;
      }
    }
  }
}
</code>

For multi‑line layouts, refer to sheral's card implementation. Key variables:

<code>$cardFlexSwitch: false !default; // default use float
$cardGap: 10px !default;
$carLineNum: 2 !default; // supports 2 or 3 columns

.card-list {
  @if $cardFlexSwitch {
    display: flex;
    flex-wrap: wrap;
  } @else {
    overflow: hidden;
  }

  .card-item {
    position: relative;
    width: 100% / $carLineNum;
    @if not $cardFlexSwitch {
      float: left;
    }
    .item-img { width: 100%; }
    .item-tt { line-height: 30px; }
  }
}
.card-list--gap{
  padding-left: $cardGap / 2;
  padding-right: $cardGap / 2;
  .card-item{
    margin-bottom: $cardGap;
    padding-left: $cardGap / 2;
    padding-right: $cardGap / 2;
  }
}
</code>

The float approach sets equal width for n items and uses padding or inner margins for spacing.

Items equal with remaining space distributed

Single line demo uses the

line-equal-item

mixin, which applies flex with

justify-content: space-between

and optional edge gaps.

<code>@mixin line-equal-item($lr: true, $children: li) {
  display: flex;
  justify-content: space-between;
  @if $lr {
    &::before,
    &::after { content: ""; }
  }
}
</code>

For multiple lines, the logic is similar to the card example; see the linked discussion for detailed gap calculations.

This article demonstrates practical use of several equal‑division mixins from sandal, enabling rapid implementation of equal spacing layouts, with fallback to float for older Android browsers.