Flex

Ready Added in 2.0.0

Utilize the power of flexbox to create a wide range of layouts.

The Flex component has an essential role in building layouts in Gloss. A lot of components, for example the Grid as well as horizontal navigations, like the Navbar, Subnav, Breadcrumb, Pagination, Tab and Dotnav are built with flexbox and can be used together with the utility classes from this component.

Usage

To apply the flexbox layout model, use one of the following classes. By default, all flex items are aligned to the left, as wide as their content and matched in height.

Class Description
.gls-flex Create the flex container and behave like a block element.
.gls-flex-inline Create the flex container and behave like an inline element. 
<div class="gls-flex">
    <div></div>
</div>
  • Item 1
    Item 2
    Item 3
  • <div class="gls-flex">
    <div class="gls-card gls-card-default gls-card-body">Item 1</div>
    <div class="gls-card gls-card-default gls-card-body gls-margin-left">Item 2</div>
    <div class="gls-card gls-card-default gls-card-body gls-margin-left">Item 3</div>
</div>

Horizontal alignment

These classes define the horizontal alignment of flex items and distribute the space between them. Add one or more of them to the flex container in order to configure the alignments of the flex items. By default, flex items are aligned to the left as does the .gls-flex-left class.

Class Description
.gls-flex-left Add this class to align flex items to the left.
.gls-flex-center Add this class to center flex items along the main axis.
.gls-flex-right Add this class to align flex items to the right.
.gls-flex-between Add this class to distribute items evenly, with equal space between the items along the main axis.
.gls-flex-around Add this class to distribute items evenly with equal space on both sides of each item. 
<div class="gls-flex gls-flex-center">
    <div></div>
</div>
  • Item 1
    Item 2
    Item 3
  • <div class="gls-flex gls-flex-center">
    <div class="gls-card gls-card-default gls-card-body">Item 1</div>
    <div class="gls-card gls-card-default gls-card-body gls-margin-left">Item 2</div>
    <div class="gls-card gls-card-default gls-card-body gls-margin-left">Item 3</div>
</div>

Responsive

Gloss provides a number of responsive flex classes for horizontal alignment. Basically, they work just like the usual flex alignment classes, except that they have suffixes that represent the breakpoint from which they come to effect.

Class Description
.gls-flex-left@s
.gls-flex-center@s
.gls-flex-right@s
.gls-flex-between@s
.gls-flex-around@s		 Only affects device widths of 640px and higher.
.gls-flex-left@m
.gls-flex-center@m
.gls-flex-right@m
.gls-flex-between@m
.gls-flex-around@m		 Only affects device widths of 960px and higher.
.gls-flex-left@l
.gls-flex-center@l
.gls-flex-right@l
.gls-flex-between@l
.gls-flex-around@l		 Only affects device widths of 1200px and higher.
.gls-flex-left@xl
.gls-flex-center@xl
.gls-flex-right@xl
.gls-flex-between@xl
.gls-flex-around@xl		 Only affects device widths of 1600px and higher. 
<div class="gls-flex gls-flex-center@m gls-flex-right@l">
    <div></div>
</div>
  • Item 1
    Item 2
    Item 3
  • <div class="gls-flex gls-flex-center@m gls-flex-right@l">
    <div class="gls-card gls-card-default gls-card-body">Item 1</div>
    <div class="gls-card gls-card-default gls-card-body gls-margin-left">Item 2</div>
    <div class="gls-card gls-card-default gls-card-body gls-margin-left">Item 3</div>
</div>

Vertical alignment

These classes define the vertical alignment of flex items. By default, flex items fill the height of their container as does the .gls-flex-stretch class.

Class Description
.gls-flex-stretch Add this class to expand flex items to fill the height of their parent.
.gls-flex-top Add this class to align flex items to the top.
.gls-flex-middle Add this class to center flex items along the cross axis.
.gls-flex-bottom Add this class to align flex items to the bottom. 
<div class="gls-flex gls-flex-middle"></div>
  • Item 1
    Item 2
    ...
    Item 3
    ...
    ...
  • <div class="gls-flex gls-flex-middle gls-text-center">
    <div class="gls-card gls-card-default gls-card-body">Item 1</div>
    <div class="gls-card gls-card-default gls-card-body gls-margin-left">Item 2<br>...</div>
    <div class="gls-card gls-card-default gls-card-body gls-margin-left">Item 3<br>...<br>...</div>
</div>

Direction modifiers

These classes define the axis that flex items are placed on and their direction. By default, items run horizontally from left to right as does the .gls-flex-row class.

Class Description
.gls-flex-row Add this class to lay out flex items as horizontal rows.
.gls-flex-row-reverse Add this class to lay out flex items from right to left.
.gls-flex-column Add this class to lay out flex items as vertical columns.
.gls-flex-column-reverse Add this class to lay out flex items from bottom to top. 
<div class="gls-flex gls-flex-column"></div>
  • Item 1
    Item 2
    Item 3
  • <div class="gls-flex gls-flex-column gls-width-1-3">
    <div class="gls-card gls-card-default gls-card-body">Item 1</div>
    <div class="gls-card gls-card-default gls-card-body gls-margin-top">Item 2</div>
    <div class="gls-card gls-card-default gls-card-body gls-margin-top">Item 3</div>
</div>

Wrap modifiers

By default, flex items are fit into one line and run from left to right. Add one of these classes to modify the behavior of wrapping flex items.

Class Description
.gls-flex-wrap Add this class to make flex items wrap into another line when they no longer fit their container.
.gls-flex-wrap-reverse Add this class to change the items’ direction so that they run from right to left.
.gls-flex-nowrap Add this class to force the flex items into one line. This is the default behavior.

The following classes modify the alignment of wrapping flex items.

Class Description
.gls-flex-wrap-stretch Add this class, so that item lines stretch to take up the remaining space
.gls-flex-wrap-between Add this class to distribute item lines evenly, with the first row at the top and last row at the bottom of the container.
.gls-flex-wrap-around Add this class to distribute lines evenly with equal space at the top and bottom of each row.
.gls-flex-wrap-top Add this class to align multiline flex items to the top.
.gls-flex-wrap-middle Add this class to vertically center multirow flex items.
.gls-flex-wrap-bottom Add this class to align multiline flex items to the bottom. 
<div class="gls-flex gls-flex-wrap gls-flex-wrap-around"></div>
  • Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
  • <div class="gls-flex gls-flex-wrap gls-flex-wrap-around gls-height-medium">
    <div class="gls-width-1-3 gls-card gls-card-default gls-card-body gls-card-small">Item 1</div>
    <div class="gls-width-1-2 gls-card gls-card-default gls-card-body gls-card-small gls-margin-left">Item 2</div>
    <div class="gls-width-1-3 gls-card gls-card-default gls-card-body gls-card-small">Item 3</div>
    <div class="gls-width-1-3 gls-card gls-card-default gls-card-body gls-card-small gls-margin-left">Item 4</div>
    <div class="gls-width-1-2 gls-card gls-card-default gls-card-body gls-card-small">Item 5</div>
    <div class="gls-width-1-3 gls-card gls-card-default gls-card-body gls-card-small gls-margin-left">Item 6</div>
</div>

Item order

By default, flex items are laid out according to the source order. To display a certain item as the first or last one, just add one of these classes.

Class Description
.gls-flex-first Displays the item as the first one.
.gls-flex-last Displays the item as the last one.
.gls-flex-first@s
.gls-flex-last@s		 Affects device widths of 640px and higher.
.gls-flex-first@m
.gls-flex-last@m		 Affects device widths of 960px and higher.
.gls-flex-first@l
.gls-flex-last@l		 Affects device widths of 1200px and higher.
.gls-flex-first@xl
.gls-flex-last@xl		 Affects device widths of 1600px and higher. 
<div class="gls-flex">
    <div></div>
    <div class="gls-flex-first"></div>
</div>
  • Item 1
    Item 2
    Item 3
  • <div class="gls-flex">
    <div class="gls-card gls-card-default gls-card-body gls-flex-last gls-margin-left">Item 1</div>
    <div class="gls-card gls-card-default gls-card-body gls-flex-first">Item 2</div>
    <div class="gls-card gls-card-default gls-card-body gls-margin-left">Item 3</div>
</div>

Item dimensions

To determine how much space a flex item should take up, add one of the following classes to the item. By default, items determine their size by their content, but are allowed to shrink.

Class Description
.gls-flex-none The box’s size is determined by its content.
.gls-flex-auto The space is allocated considering the item’s content.
.gls-flex-1 The space is allocated solely based on flex.

Flex and grid

The Flex component can be combined with a grid from the Grid component.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

    Image 
  • <div class="gls-flex-middle" gls-grid>
    <div class="gls-width-2-3@m">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
    </div>
    <div class="gls-width-1-3@m gls-flex-first">
        <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" width="1800" height="1200" alt="Image">
    </div>
</div>