Flex

Flex is perfectly suited for utility classes. Without writing a single line of CSS you'll be able to create any kind of flex based layout.

File location: sass/layout/_flex.scss (GitHub)

Code Examples

1. Responsive Masonry with flex-wrap

<div class="flex f-wrap" style="height:28rem; color:#fff;">
  <div class="flex f-grow-1 f-direction-column" style="min-width:20rem;">
    <div class="bg-gray-darker f-center padding-20 margin-5">Content</div>
    <div class="bg-gray f-1 f-center padding-20 margin-5">Content</div>
  </div>
    <div class="f-center f-grow-1 bg-gray-dark margin-5" style="min-width:30rem;">Content</div>
    <div class="f-center f-4 bg-gray-darker padding-20 margin-5">Content</div>
</div>

Inline style tags for demo puprposes only. Result:

2. Bar Chart

<div class="flex padding-20 radius-6 border-gray-light box-shadow-1 text-right demo-barchart">
  <div class="flex f-direction-column justify-content-space-around padding-right-10 text-right" style="width:20rem;">
    <div class="">Australia</div>
    <div class="">Cameroon</div>
    <div class="">Brazil</div>
    <div class="">Germany</div>
    <div class="">Indonesia</div>
  </div>
  <div class="flex width-100pct f-direction-column justify-content-space-around">
    <div class="bg-gray-light padding-right-10 border-gray radius-4 text-black text-right" style="width:79%;">
      <small>79%</small>
    </div>
    <div class="bg-gray-light padding-right-10 border-gray radius-4 text-black text-right" style="width:72%;">
      <small>72%</small>
    </div>
    <div class="bg-gray-light padding-right-10 border-gray radius-4 text-black text-right" style="width:68.7%;">
      <small>68.7%</small>
    </div>
    <div class="bg-gray-light padding-right-10 border-gray radius-4 text-black text-right" style="width:67%;">
      <small>67%</small>
    </div>
    <div class="bg-gray-light padding-right-10 border-gray radius-4 text-black text-right" style="width:53.5%;">
      <small>53.5%</small>
    </div>
  </div>
</div>

Inline style tags for demo puprposes only. Result:

3. Horizontal Distribution of Elements

<div class="flex justify-content-space-between p-20 border-gray-light border-dashed radius-10">
  <div>
    <span class="p-10 pt-5 pb-5 bg-gray-darker radius text-white">element 1</span>
  </div>
  <div>
    <span class="p-10 pt-5 pb-5 bg-gray-darker radius text-white">element 2</span>
    <span class="p-10 pt-5 pb-5 bg-gray-darker radius text-white">element 3</span>
  </div>
</div>

Result:

Complete List of Flex Utilities

Responsive Overrides for Parent Elements

Each responsive utility is available for every responsive breakpoint:

• desktop-large and above
• desktop and above
• tablet-landscape and below
• tablet-portrait and below
• phone-landscape and below
• phone only

The default viewport laptop is intentionally omitted.

Change Flex to Block

On certain viewports, either reveal a hidden flex container while converting it to a block element, or convert an already visible flex container to a block element.

<div class="flex block-phone">
  <div class="column">
    <p>Child 1</p>
  </div>
  <div class="column">
    <p>Child 2</span>
  </div>
</div>

Scale down your window to the phone viewport (<= 600px) to see the responsive change:

See more hide/show utilities for flex on the visibility page.

Reveal Hidden Elements as Flex

Show elements as flex elements on certain viewports, if they are hidden with display: none;.

^*) These both do the same thing. The only difference is the naming, intended to make their function clearer for developers.

See more hide/show utilities for flex on the visibility page.

Flex Unset

Flex Wrap Reverse

Scale down your browser window to tablet-portrait (<= 900px) in order to see the effect.

Flex Wrap Unset

Change Flex Direction

Let's try to reverse the flex-direction on smaller viewports:

<div class="flex f-direction-row-reverse-phone-landscape">
  ...
</div>

Scale down your browser window to phone-landscape (<= 768px) and you'll see the responsive change:

Responsive Overrides for Child Elements

Internal proportions in a flex-wrap context

For each of these utilities we use two variables: breakpoints and fractions. The naming pattern is .f-{breakpoint}-{fraction}.

What they do is setting a minimum width in percent from a certain breakpoint and up/down (depending on which breakpoint it is). This influences how the element behaves in a flex container with .f-wrap.

Breakpoints are values such as desktop-large, desktop, laptop, etc.

The default fractions can be seen in the code example below. You can modify the default values when initializing hgrid as Sass. Look for the fractions array in the hgrid variables. This is the compiled default output for the phone media query:

@media (max-width: 600px) {
  .f-phone-100 {
    flex: 1 0 100%;
  }

  .f-phone-90 {
    flex: 1 0 90%;
  }

  .f-phone-80 {
    flex: 1 0 80%;
  }

  .f-phone-75 {
    flex: 1 0 75%;
  }

  .f-phone-70 {
    flex: 1 0 70%;
  }

  .f-phone-66 {
    flex: 1 0 66.666666%;
  }

  .f-phone-60 {
    flex: 1 0 60%;
  }

  .f-phone-50 {
    flex: 1 0 50%;
  }

  .f-phone-40 {
    flex: 1 0 40%;
  }

  .f-phone-33 {
    flex: 1 0 33.333333%;
  }

  .f-phone-30 {
    flex: 1 0 30%;
  }

  .f-phone-25 {
    flex: 1 0 25%;
  }

  .f-phone-20 {
    flex: 1 0 20%;
  }

  .f-phone-10 {
    flex: 1 0 10%;
  }

  .f-phone-5 {
    flex: 1 0 5%;
  }
}

Example

Scale your browser to tablet-landscape or smaller and see the internal proportions change:

The code:

<div class="flex f-wrap padding-10 radius-14">
  <div class="f-tablet-landscape-75">1</div>
  <div class="f-tablet-landscape-5">2</div>
  <div class="f-tablet-landscape-25">3</div>
  <div class="f-tablet-landscape-5">4</div>
</div>

← Previous: Accurate Columns

Next: Grid →