Layout

Stacks (Flex)

Stacks consist in a set of utilites leveraging the power of CSS flexbox in order to give you the ability to build complex layouts. A stack can be nested inside another stack, making it possible to create a wide range of layouts.

Notice: Don't use stacks when the layout you're aiming for depends on the grid, use the grid itself.

To start using the stack utilities, make sure the container has display: flex or display: inline-flex. You can use the .ecl-u-d-flex or .ecl-u-d-inline-flex classes for this.

Flex container
<div class="demo-container ecl-u-d-flex">Flex container</div>

Inline flex container

<div class="demo-container ecl-u-d-inline-flex">
  <p class="iRCJJeCgSXzX9ymLg1TH">Inline flex container</p>
</div>

Then you can start adding items to the container:

Item 1
Item 2
Item 3
<div class="demo-container ecl-u-d-flex">
  <div class="demo-box">Item 1</div>
  <div class="demo-box">Item 2</div>
  <div class="demo-box">Item 3</div>
</div>

Direction

The first propery you can set on the flex container is the direction. There are 4 possibilites:

  • row: .ecl-u-flex-row (default)
  • row reverse: .ecl-u-flex-row-reverse
  • column: .ecl-u-flex-column
  • column reverse: .ecl-u-flex-column-reverse
Item 1
Item 2
Item 3
<div class="demo-container ecl-u-d-flex ecl-u-flex-row">
  <div class="demo-box">Item 1</div>
  <div class="demo-box">Item 2</div>
  <div class="demo-box">Item 3</div>
</div>
Item 1
Item 2
Item 3
<div class="demo-container ecl-u-d-flex ecl-u-flex-row-reverse">
  <div class="demo-box">Item 1</div>
  <div class="demo-box">Item 2</div>
  <div class="demo-box">Item 3</div>
</div>
Item 1
Item 2
Item 3
<div class="demo-container ecl-u-d-flex ecl-u-flex-column">
  <div class="demo-box">Item 1</div>
  <div class="demo-box">Item 2</div>
  <div class="demo-box">Item 3</div>
</div>
Item 1
Item 2
Item 3
<div class="demo-container ecl-u-d-flex ecl-u-flex-column-reverse">
  <div class="demo-box">Item 1</div>
  <div class="demo-box">Item 2</div>
  <div class="demo-box">Item 3</div>
</div>

Wrap

You can decide to not wrap the items (the flex container is single-line) or to wrap them (the flex container is multi-line)

  • no wrap: .ecl-u-flex-nowrap (default)
  • wrap: .ecl-u-flex-wrap
  • wrap reverse: .ecl-u-flex-wrap-reverse
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

Alignment

Main-axis: justify-content

You can use justify-content utilities to change the alignment of the items on the main-axis.

Available utilities include:

  • .ecl-u-justify-content-start (default behaviour)
  • .ecl-u-justify-content-end
  • .ecl-u-justify-content-center
  • .ecl-u-justify-content-between
  • .ecl-u-justify-content-around
Item 1
Item 2
Item 3
<div class="demo-container ecl-u-d-flex ecl-u-justify-content-start">
  <div class="demo-box">Item 1</div>
  <div class="demo-box">Item 2</div>
  <div class="demo-box">Item 3</div>
</div>
Item 1
Item 2
Item 3
<div class="demo-container ecl-u-d-flex ecl-u-justify-content-end">
  <div class="demo-box">Item 1</div>
  <div class="demo-box">Item 2</div>
  <div class="demo-box">Item 3</div>
</div>
Item 1
Item 2
Item 3
<div class="demo-container ecl-u-d-flex ecl-u-justify-content-center">
  <div class="demo-box">Item 1</div>
  <div class="demo-box">Item 2</div>
  <div class="demo-box">Item 3</div>
</div>
Item 1
Item 2
Item 3
<div class="demo-container ecl-u-d-flex ecl-u-justify-content-between">
  <div class="demo-box">Item 1</div>
  <div class="demo-box">Item 2</div>
  <div class="demo-box">Item 3</div>
</div>
Item 1
Item 2
Item 3
<div class="demo-container ecl-u-d-flex ecl-u-justify-content-around">
  <div class="demo-box">Item 1</div>
  <div class="demo-box">Item 2</div>
  <div class="demo-box">Item 3</div>
</div>

Cross-axis: align-items

You can use align-items utilities to change the alignment of the items on the cross-axis.

Available utilities include:

  • .ecl-u-align-items-start
  • .ecl-u-align-items-end
  • .ecl-u-align-items-center
  • .ecl-u-align-items-baseline
  • .ecl-u-align-items-stretch (default behaviour)
Item 1
Item 2
Item 3
<div class="demo-container demo-container--default-height-small ecl-u-d-flex ecl-u-align-items-start">
  <div class="demo-box">Item 1</div>
  <div class="demo-box">Item 2</div>
  <div class="demo-box">Item 3</div>
</div>
Item 1
Item 2
Item 3
<div class="demo-container demo-container--default-height-small ecl-u-d-flex ecl-u-align-items-end">
  <div class="demo-box">Item 1</div>
  <div class="demo-box">Item 2</div>
  <div class="demo-box">Item 3</div>
</div>
Item 1
Item 2
Item 3
<div class="demo-container demo-container--default-height-small ecl-u-d-flex ecl-u-align-items-center">
  <div class="demo-box">Item 1</div>
  <div class="demo-box">Item 2</div>
  <div class="demo-box">Item 3</div>
</div>
Item 1
Item 2
Item 3
<div class="demo-container demo-container--default-height-small ecl-u-d-flex ecl-u-align-items-baseline">
  <div class="demo-box">Item 1</div>
  <div class="demo-box">Item 2</div>
  <div class="demo-box">Item 3</div>
</div>
Item 1
Item 2
Item 3
<div class="demo-container demo-container--default-height-small ecl-u-d-flex ecl-u-align-items-stretch">
  <div class="demo-box">Item 1</div>
  <div class="demo-box">Item 2</div>
  <div class="demo-box">Item 3</div>
</div>

Packing flex lines: align-content

You can use align-content utilities to align a flex container's lines within the flex container when there is extra space on the cross-axis. This is similar to how justify-content aligns individual items on the main-axis.

These utilities have no effect on single rows of flex items.

Available utilities include:

  • .ecl-u-align-content-start
  • .ecl-u-align-content-end
  • .ecl-u-align-content-center
  • .ecl-u-align-content-between
  • .ecl-u-align-content-around
  • .ecl-u-align-content-stretch (default behaviour)
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9

Align items independently: align-self

You can use the align-self utilities on the items to control their alignment on the cross-axis the same way that you can use align-items on the container.

Available utilities include:

  • .ecl-u-align-self-auto (default behaviour, defers alignment control to the value of align-items on the parent container)
  • .ecl-u-align-self-start
  • .ecl-u-align-self-end
  • .ecl-u-align-self-center
  • .ecl-u-align-self-baseline
  • .ecl-u-align-self-stretch
Item 1
Item 2
Item 3
<div
  class="ecl-u-d-flex ecl-u-flex-wrap ecl-u-align-content-stretch demo-container demo-container--small demo-container--default-height-long demo-container--resizable">
  <div class="demo-box">Item 1</div>
  <div class="demo-box ecl-u-align-self-start">Item 2</div>
  <div class="demo-box">Item 3</div>
</div>
Item 1
Item 2
Item 3
<div
  class="ecl-u-d-flex ecl-u-flex-wrap ecl-u-align-content-stretch demo-container demo-container--small demo-container--default-height-long demo-container--resizable">
  <div class="demo-box">Item 1</div>
  <div class="demo-box ecl-u-align-self-end">Item 2</div>
  <div class="demo-box">Item 3</div>
</div>
Item 1
Item 2
Item 3
<div
  class="ecl-u-d-flex ecl-u-flex-wrap ecl-u-align-content-stretch demo-container demo-container--small demo-container--default-height-long demo-container--resizable">
  <div class="demo-box">Item 1</div>
  <div class="demo-box ecl-u-align-self-center">Item 2</div>
  <div class="demo-box">Item 3</div>
</div>
Item 1
Item 2
Item 3
<div
  class="ecl-u-d-flex ecl-u-flex-wrap ecl-u-align-content-stretch demo-container demo-container--small demo-container--default-height-long demo-container--resizable">
  <div class="demo-box">Item 1</div>
  <div class="demo-box ecl-u-align-self-baseline">Item 2</div>
  <div class="demo-box">Item 3</div>
</div>
Item 1
Item 2
Item 3
<div
  class="ecl-u-d-flex ecl-u-flex-wrap ecl-u-align-content-stretch demo-container demo-container--small demo-container--default-height-long demo-container--resizable">
  <div class="demo-box">Item 1</div>
  <div class="demo-box ecl-u-align-self-stretch">Item 2</div>
  <div class="demo-box">Item 3</div>
</div>

Growing and shrinking items

You can use the .ecl-u-flex-grow-0 (default behaviour) and .ecl-u-flex-grow-1 on flex items to decide whether or not these items should grow to fill available space.

In the example below, we use .ecl-u-flex-grow-1 on the second item:

Item 1
Item 2
Item 3
<div class="demo-container ecl-u-d-flex">
  <div class="demo-box">Item 1</div>
  <div class="demo-box ecl-u-flex-grow-1">Item 2</div>
  <div class="demo-box">Item 3</div>
</div>

In the same spirit, you can use .ecl-u-flex-shrink-0 and .ecl-u-flex-shrink-1 (default behaviour) to toggle an item's ability to shrink if necessary.

In the example below, we use .ecl-u-flex-shrink-0 on the second item:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Item 2: it doesn't shrink

Item 3: this one shrinks too

Order

Change the order of the items with the order utilities:

  • .ecl-u-order-first
  • .ecl-u-order-last
  • .ecl-u-order-0 (defaut behaviour)
Item 1 (but I appear last!)
Item 2

Item 3 (and I appear first!)

Item 4