Utilities for using flexbox. These are single-purpose classes aimed to help module layout concerns. Can also use it as trumps for overwrites. It is not ideal to use this utility set to layout everything in your app. Use hammock-components-flexbox for components and page/app layouts.

Utils-Flexbox - Basic container layout

Utilities for using flexbox. Sets up the flexbox container and how items inside flow.

HTML

<style>
    .Test-area {
        width: 300px;
        border: 1px solid black;
    }
    .Test-area-2 {
        height: 100px;
        border: 1px solid black;
    }
    .Test-area > div, .Test-box {
        background-color: green;
        color: white;
        width: 100px;
        height: 50px;
        margin: .2em;
    }
    .Test-box-fixed-width {
        min-width: 100px;
    }
    .Test-inner {
        background-color: green;
        color: white;
        border: 1px solid cyan;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .Test-overflow, .Test-overflow .Test-inner {
        overflow:hidden;
    }
</style>

<div>Flex default, flow in a row. Same as using <code>class="u-flexInline</code> which ensures inline-level flex display.</div>
<div class="u-flex Test-area">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<div>Flex items in a column</div>
<div class="u-flex u-flexColumn Test-area">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<div>Flex items in a row</div>
<div class="u-flex u-flexRow Test-area">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<div>Flex items wrap to container width</div>
<div class="u-flex u-flexWrap Test-area">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<div>Flex items don't wrap</div>
<div class="u-flex u-flexNowrap Test-area">
  <div class="Test-box-fixed-width">1</div>
  <div class="Test-box-fixed-width">2</div>
  <div class="Test-box-fixed-width">3</div>
  <div class="Test-box-fixed-width">4</div>
</div>

Utils-Flexbox - Reverse direction in container

Flow items in the reversed order on x- or y-axis

HTML

<div>Flex items in a column in reversed order</div>
<div class="u-flex u-flexColumnReverse Test-area">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<div>Flex items in a row in reversed order</div>
<div class="u-flex u-flexRowReverse Test-area">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<div>Flex items in reversed order and wrap to container width</div>
<div class="u-flex u-flexWrapReverse Test-area">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Utils-Flexbox - Justify/Space items along the main X-axis

Control spacing of items on the X-axis

HTML

<div>Space items evenly or justified on x-axis</div>
<div class="u-flex u-flexSpaced" style="border:1px solid black">
  <div class="Test-box">1</div>
  <div class="Test-box">2</div>
  <div class="Test-box">3</div>
</div>

<div>Space items evenly but with equal space around it</div>
<div class="u-flex u-flexSpacedAround" style="border:1px solid black">
  <div class="Test-box">1</div>
  <div class="Test-box">2</div>
  <div class="Test-box">3</div>
</div>

<div>Center items on the x-axis</div>
<div class="u-flex u-flexCentered" style="border:1px solid black">
  <div class="Test-box">1</div>
  <div class="Test-box">2</div>
  <div class="Test-box">3</div>
</div>

<div>Item flow begins at the start of x-axis. This is the default behavior for flex container items.</div>
<div class="u-flex u-flexStart" style="border:1px solid black">
  <div class="Test-box">1</div>
  <div class="Test-box">2</div>
  <div class="Test-box">3</div>
</div>

<div>Item flow begins at the end of x-axis.</div>
<div class="u-flex u-flexEnd" style="border:1px solid black">
  <div class="Test-box">1</div>
  <div class="Test-box">2</div>
  <div class="Test-box">3</div>
</div>

Utils-Flexbox - Align items along the cross Y-axis

Control spacing and positioining of items on the Y-axis

HTML

<div>Items are stretched to fill the container across the Y-axis. This is default flexbox behavior, repects height value.</div>
<div class="u-flex u-flexStretch Test-area-2">
  <div style="background: green; width: 50px">1</div>
  <div style="background: green;  width: 50px">2</div>
  <div style="background: green; width: 50px;">3</div>
</div>
<div>Align items in the middle of the y-axis</div>
<div class="u-flex u-flexMiddle Test-area-2">
  <div class="Test-box" style="height: 80px">1</div>
  <div class="Test-box" style="height: 30px">2</div>
  <div class="Test-box">3</div>
</div>
<div>Items are aligned along their baselines</div>
<div class="u-flex u-flexBaseline Test-area-2">
  <div class="Test-box" style="height: 80px; padding: 1em">1</div>
  <div class="Test-box" style="height: 30px">2</div>
  <div class="Test-box">3</div>
</div>
<div>Item flow begins at the start/top of y-axis.</div>
<div class="u-flex u-flexTop Test-area-2">
  <div class="Test-box" style="height: 80px; padding: 1em">1</div>
  <div class="Test-box" style="height: 30px">2</div>
  <div class="Test-box">3</div>
</div>
<div>Item flow begins at the end (bottom) of y-axis.</div>
<div class="u-flex u-flexBottom Test-area-2">
  <div class="Test-box" style="height: 80px">1</div>
  <div class="Test-box" style="height: 30px">2</div>
  <div class="Test-box">3</div>
</div>

Utils-Flexbox - Grow, Shrink

Grow or shrink

HTML

<div>Grow items to fit the container in height and width</div>
<div class="u-flex" style="height:50px; width:500px">
  <span class="u-flexItemGrow Test-inner" style="width: 100px">1</span>
  <span class="u-flexItemGrow Test-inner" style="width: 100px">2</span>
</div>
<div>Shrink items to fit the container in height and width</div>
<div class="u-flex" style="height:50px; width:500px">
  <span class="u-flexItemShrink Test-inner" style="width: 800px">1</span>
  <span class="u-flexItemShrink Test-inner" style="width: 800px">2</span>
</div>

Utils-Flexbox - Basis Zero

Set the initial main size of a flex element to 0, primarily used to resolve IE flex issues;

HTML

<div>This is just an example of this utility being used, will come back to put in a broken & working example</div>
<div class="u-flex u-flexColumn" style="height:50px; width:500px">
    <span class="u-flexItemGrow u-flexBaseZero Test-inner" style="width: 100px">1</span>
</div>

Utils-Flexbox - Grow, Srhink

Test bug fix to address overflow flexbox items in chrome browser;

HTML

<div class="u-flex Test-overflow" style="height:20px; width:200px">
  <span class="u-flexItemGrow Test-inner">1 let's add some texts to test test this issue</span>
  <span class="Test-inner">2 Test box</span>
</div>
<div class="u-flex u-flexColumn Test-overflow" style="height:50px; width:50px">
  <span class="u-flexItemGrow Test-inner">1 let's add some texts to test test this issue</span>
  <span class="Test-inner">2 Test box</span>
</div>

Utils-Flexbox - Keep width and height

preserve the width and height of the element itself, no grow or shrink

HTML

<div>Not shrinking width of item</div>
<div class="u-flex" style="height:50px; width:500px">
  <span class="u-flexItemNoShrink Test-inner" style="width: 800px;">1</span>
</div>
<div>maintain height of the element to the container in height and width</div>
<div class="u-flex" style="height:60px; width:500px;">
  <span class="u-flexKeepHeight Test-inner">1</span>
</div>

Utils-Flexbox - Self Alignment

Specify individual item's alignment overriding one defined on the container. Float, clear and vertical-align are ignored on flex items.

HTML

<div class="u-flex Test-area-2">
  <div class="Test-box u-flexItemBaseline" style="height: 80px">1 Middle</div>
  <div class="Test-box u-flexItemMiddle" style="height: 30px">2 Baseline</div>
  <div class="Test-box u-flexItemBottom">3 Bottom</div>
  <div class="Test-box u-flexItemTop">4 Top</div>
</div>
<div class="u-flex Test-area-2">
  <div class="u-flexItemStretch Test-box">1</div>
  <div class="u-flexItemStretch Test-box">2</div>
  <div class="u-flexItemStretch Test-box">3</div>
  <div class="u-flexItemStretch Test-box">4</div>
</div>

Utils-Flexbox - Item Order

Force move an item to be the first or last in a container

HTML

<div class="u-flex Test-area-2">
  <div class="Test-box">1</div>
  <div class="Test-box">2</div>
  <div class="Test-box u-flexItemFirst">3 (force to first)</div>
  <div class="Test-box">4</div>
</div>
<div class="u-flex Test-area-2">
  <div class="Test-box">1</div>
  <div class="Test-box u-flexItemLast">2 (force to last)</div>
  <div class="Test-box">3</div>
  <div class="Test-box">4</div>
</div>

Utils-Flexbox - Item Porportional Sizing

Relative sizing of items in container

HTML

<div class="u-flex Test-area-2">
  <div class="Test-inner u-flexItemSized">1</div>
  <div class="Test-inner u-flexItemSized+">2</div>
  <div class="Test-inner u-flexItemSized++">3</div>
</div>
<div class="u-flex Test-area-2">
  <div class="Test-box u-flexItemSized">1</div>
  <div class="Test-box u-flexItemSized+">2</div>
  <div class="Test-box u-flexItemSized++">3</div>
  <div class="Test-box u-flexItemSized">4</div>
  <div class="Test-box u-flexItemSized++">5</div>
</div>