Getting started
Layouts
Styles
Helpers
Elements
Components
Organisms
Templates
Other

Flexbox

The hx-flexbox component is an abstraction of the flexbox layout.
It aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic.

Unlike the grid system it does not have any padding, margins and does not react to breakpoints.
It's purely for distributing items in a horizontal or vertical configuration, whilst optionally filling space.
This abstraction utility supports most of the flexbox properties.
However sometimes you may need to just write pure css, for example; change the flex-basis values.

Click here for a complete guide to flexbox.

Horizontal flex direction (Row)

      

<div class="hx-flex hx-bg">
  <div class="hx-bg-primary pa-5 ma-1">1</div>
  <div class="hx-bg-primary pa-5 ma-1">2</div>
  <div class="hx-bg-primary pa-5 ma-1">3</div>
  <div class="hx-bg-primary pa-5 ma-1">4</div>
</div>
1
2
3
4

Vertical flex direction (Column)

      

<div class="hx-flex hx-flex-column hx-bg">
  <div class="hx-bg-primary pa-5 ma-1">1</div>
  <div class="hx-bg-primary pa-5 ma-1">2</div>
  <div class="hx-bg-primary pa-5 ma-1">3</div>
  <div class="hx-bg-primary pa-5 ma-1">4</div>
</div>
1
2
3
4

Flex grow

      

<p>This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. <br>
It dictates what amount of the available space inside the flex container the item should take up.</p>

<p><code>.hx-flex-*</code> from 1 - 12</p>

<h5>Flex grow 1</h5>
<div class="hx-flex hx-bg">
  <div class="hx-bg-primary pa-5 ma-1">1</div>
  <div class="hx-flex-1 hx-bg-primary pa-5 ma-1">2</div>
  <div class="hx-bg-primary pa-5 ma-1">3</div>
  <div class="hx-bg-primary pa-5 ma-1">4</div>
</div>

<h5>Flex grow 2</h5>
<div class="hx-flex hx-bg">
  <div class="hx-flex-1 hx-bg-primary pa-5 ma-1">1</div>
  <div class="hx-flex-2 hx-bg-primary pa-5 ma-1">2</div>
  <div class="hx-bg-primary pa-5 ma-1">3</div>
  <div class="hx-bg-primary pa-5 ma-1">4</div>
</div>

<h5>Flex grow 3</h5>
<div class="hx-flex hx-bg">
  <div class="hx-flex-1 hx-bg-primary pa-5 ma-1">1</div>
  <div class="hx-flex-2 hx-bg-primary pa-5 ma-1">2</div>
  <div class="hx-flex-3 hx-bg-primary pa-5 ma-1">3</div>
  <div class="hx-bg-primary pa-5 ma-1">4</div>
</div>

<h5>Flex grow 4</h5>
<div class="hx-flex hx-bg">
  <div class="hx-flex-1 hx-bg-primary pa-5 ma-1">1</div>
  <div class="hx-flex-2 hx-bg-primary pa-5 ma-1">2</div>
  <div class="hx-flex-3 hx-bg-primary pa-5 ma-1">3</div>
  <div class="hx-flex-4 hx-bg-primary pa-5 ma-1">4</div>
</div>

This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion.
It dictates what amount of the available space inside the flex container the item should take up.

.hx-flex-* from 1 - 12

Flex grow 1
1
2
3
4
Flex grow 2
1
2
3
4
Flex grow 3
1
2
3
4
Flex grow 4
1
2
3
4

Flex wrap

      
<p>By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.</p>

<div class="hx-flex hx-flex-wrap hx-bg">
  <div class="hx-bg-primary pa-5 ma-1">1</div>
  <div class="hx-bg-primary pa-5 ma-1">2</div>
  <div class="hx-bg-primary pa-5 ma-1">3</div>
  <div class="hx-bg-primary pa-5 ma-1">4</div>
  <div class="hx-bg-primary pa-5 ma-1">5</div>
  <div class="hx-bg-primary pa-5 ma-1">6</div>
  <div class="hx-bg-primary pa-5 ma-1">7</div>
  <div class="hx-bg-primary pa-5 ma-1">8</div>
  <div class="hx-bg-primary pa-5 ma-1">9</div>
  <div class="hx-bg-primary pa-5 ma-1">10</div>
  <div class="hx-bg-primary pa-5 ma-1">11</div>
  <div class="hx-bg-primary pa-5 ma-1">12</div>
  <div class="hx-bg-primary pa-5 ma-1">13</div>
  <div class="hx-bg-primary pa-5 ma-1">14</div>
  <div class="hx-bg-primary pa-5 ma-1">15</div>
  <div class="hx-bg-primary pa-5 ma-1">16</div>
  <div class="hx-bg-primary pa-5 ma-1">17</div>
  <div class="hx-bg-primary pa-5 ma-1">18</div>
  <div class="hx-bg-primary pa-5 ma-1">19</div>
  <div class="hx-bg-primary pa-5 ma-1">20</div>
  <div class="hx-bg-primary pa-5 ma-1">21</div>
  <div class="hx-bg-primary pa-5 ma-1">22</div>
  <div class="hx-bg-primary pa-5 ma-1">23</div>
  <div class="hx-bg-primary pa-5 ma-1">24</div>
</div>

By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Justify content

      
<p>This defines the alignment along the main axis.</p>
<h5>flex-start</h5>
<div class="hx-flex hx-flex-justify-start hx-bg">
  <div class="hx-bg-primary pa-5 ma-1">1</div>
  <div class="hx-bg-primary pa-5 ma-1">2</div>
  <div class="hx-bg-primary pa-5 ma-1">3</div>
  <div class="hx-bg-primary pa-5 ma-1">4</div>
</div>

<h5>flex-end</h5>
<div class="hx-flex hx-flex-justify-end hx-bg">
  <div class="hx-bg-primary pa-5 ma-1">1</div>
  <div class="hx-bg-primary pa-5 ma-1">2</div>
  <div class="hx-bg-primary pa-5 ma-1">3</div>
  <div class="hx-bg-primary pa-5 ma-1">4</div>
</div>

<h5>center</h5>
<div class="hx-flex hx-flex-justify-center hx-bg">
  <div class="hx-bg-primary pa-5 ma-1">1</div>
  <div class="hx-bg-primary pa-5 ma-1">2</div>
  <div class="hx-bg-primary pa-5 ma-1">3</div>
  <div class="hx-bg-primary pa-5 ma-1">4</div>
</div>

<h5>space-between</h5>
<div class="hx-flex hx-flex-justify-between hx-bg">
  <div class="hx-bg-primary pa-5 ma-1">1</div>
  <div class="hx-bg-primary pa-5 ma-1">2</div>
  <div class="hx-bg-primary pa-5 ma-1">3</div>
  <div class="hx-bg-primary pa-5 ma-1">4</div>
</div>

<h5>space-around</h5>
<div class="hx-flex hx-flex-justify-around hx-bg">
  <div class="hx-bg-primary pa-5 ma-1">1</div>
  <div class="hx-bg-primary pa-5 ma-1">2</div>
  <div class="hx-bg-primary pa-5 ma-1">3</div>
  <div class="hx-bg-primary pa-5 ma-1">4</div>
</div>

<h5>space-evenly</h5>
<div class="hx-flex hx-flex-justify-evenly hx-bg">
  <div class="hx-bg-primary pa-5 ma-1">1</div>
  <div class="hx-bg-primary pa-5 ma-1">2</div>
  <div class="hx-bg-primary pa-5 ma-1">3</div>
  <div class="hx-bg-primary pa-5 ma-1">4</div>
</div>

This defines the alignment along the main axis.

flex-start
1
2
3
4
flex-end
1
2
3
4
center
1
2
3
4
space-between
1
2
3
4
space-around
1
2
3
4
space-evenly
1
2
3
4

Align items

      
<p>This defines the default behavior for how flex items are laid out along the cross axis on the current line. </p>
<h5>flex-start</h5>
<div class="hx-flex hx-flex-align-start hx-bg flexContainer">
  <div class="hx-bg-primary pa-5 ma-1 flexItem">1</div>
  <div class="hx-bg-primary pa-5 ma-1 flexItem">2</div>
  <div class="hx-bg-primary pa-5 ma-1 flexItem">3</div>
  <div class="hx-bg-primary pa-5 ma-1 flexItem">4</div>
</div>

<h5>flex-end</h5>
<div class="hx-flex hx-flex-align-end hx-bg flexContainer">
  <div class="hx-bg-primary pa-5 ma-1 flexItem">1</div>
  <div class="hx-bg-primary pa-5 ma-1 flexItem">2</div>
  <div class="hx-bg-primary pa-5 ma-1 flexItem">3</div>
  <div class="hx-bg-primary pa-5 ma-1 flexItem">4</div>
</div>

<h5>center</h5>
<div class="hx-flex hx-flex-align-center hx-bg flexContainer">
  <div class="hx-bg-primary pa-5 ma-1 flexItem">1</div>
  <div class="hx-bg-primary pa-5 ma-1 flexItem">2</div>
  <div class="hx-bg-primary pa-5 ma-1 flexItem">3</div>
  <div class="hx-bg-primary pa-5 ma-1 flexItem">4</div>
</div>

<h5>stretch</h5>
<div class="hx-flex hx-flex-align-stretch hx-bg flexContainer">
  <div class="hx-bg-primary pa-5 ma-1">1</div>
  <div class="hx-bg-primary pa-5 ma-1">2</div>
  <div class="hx-bg-primary pa-5 ma-1">3</div>
  <div class="hx-bg-primary pa-5 ma-1">4</div>
</div>

This defines the default behavior for how flex items are laid out along the cross axis on the current line.

flex-start
1
2
3
4
flex-end
1
2
3
4
center
1
2
3
4
stretch
1
2
3
4