PatternLab (0.1.259)

# Flexbox

TIP

Flexbox Basics: mediaevent.de/css/display-flex (opens new window) or css-tricks.com/almanac/properties/f/flex/ (opens new window)

Shorthand CSS: flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

# Flexbox Helper Classes

TIP

  • .h-flex sets display: flex
  • Additional Classes: .h-flex-column, .h-flex-row, .h-cell, .h-equal-sizing, .h-space-between, .h-space-around, .h-center, .h-vertical-center, .h-baseline, .h-start, .h-end, .h-top, .h-bottom, .h-stretch

# Flex Cell

.h-flex.h-cell sets flex: 1, which is equivalent to flex: 1 0px. It makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the remaining space.

flex: 1

flex: 1

flex: 1

flex: 2

hide code 
<div class="h-flex h-cell">
    <div class="h-highlight-block m-x-l -dark"><p>flex: 1</p></div>
    <div class="h-highlight-block m-x-l -dark"><p>flex: 1</p></div>
    <div class="h-highlight-block m-x-l -dark"><p>flex: 1</p></div>
    <div class="h-highlight-block m-x-l -dark" style="flex: 2;"><p>flex: 2</p></div>
</div>

# Equal Sizing

flex-grow: 1

flex-grow: 1

flex-grow: 1

flex-grow: 1

hide code 
<div class="h-flex h-equal-sizing">
    <div class="h-highlight-block m-r-l -dark"><p>flex-grow: 1</p></div>
    <div class="h-highlight-block m-r-m -dark"><p>flex-grow: 1</p></div>
    <div class="h-highlight-block m-l-m -dark"><p>flex-grow: 1</p></div>
    <div class="h-highlight-block m-l-l -dark"><p>flex-grow: 1</p></div>
</div>

# Horizontal Positioning

# Space-Between

space-between

space-between

hide code 
<div class="h-flex h-flex-row h-space-between">
    <div class="h-highlight-block -dark h-width-20"><p>space-between</p></div>
    <div class="h-highlight-block -dark h-width-40"><p>space-between</p></div>
</div>

# Space-Around

space-around

space-around

hide code 
<div class="h-flex h-flex-row h-space-around">
    <div class="h-highlight-block -dark h-width-20"><p>space-around</p></div>
    <div class="h-highlight-block -dark h-width-20"><p>space-around</p></div>
</div>

# Center (X-Axis)

.h-flex-row.h-center

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

hide code 
<div class="h-flex h-flex-row h-center">
    <div class="h-highlight-block -dark h-width-40">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    </div>
</div>

# Start / End

.h-flex-row[.h-start, .h-end]

h-end

hide code 
<div class="h-flex h-flex-row h-end">
    <div class="h-highlight-block -dark h-width-40">
        <p>h-end</p>
    </div>
</div>

# Vertical Positioning

.h-top, .h-bottom, .h-vertical-center, .h-baseline

# Center (Y-Axis)

.h-flex-row.h-vertical-center

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

center

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

hide code 
<div class="h-flex h-flex-row h-vertical-center">   
    <div class="h-highlight-block h-width-30 -dark">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
    </div>    
    <div class="h-highlight-block -dark h-width-30 m-x-xl">
        <p>center</p>
    </div>  
    <div class="h-highlight-block -dark h-width-30">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    </div>
</div>

# Baseline

.h-flex-row.h-baseline

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

baseline

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

hide code 
<div class="h-flex h-flex-row h-baseline">   
    <div class="h-highlight-block h-width-30 -dark">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
    </div>    
    <div class="h-highlight-block -dark h-width-30 m-x-xl">
        <p>baseline</p>
    </div>  
    <div class="h-highlight-block -dark h-width-30">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    </div>
</div>

# Stretch

.h-flex-row.h-stretch

stretch

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

hide code 
<div class="h-flex h-flex-row h-stretch">
    <div class="h-highlight-block -dark">
        <p>stretch</p>
    </div>    
    <div class="h-highlight-block">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
    </div>    
    <div class="h-highlight-block -dark">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    </div>
</div>

# Flex-Wrap

.h-flex-row.h-wrap

h-wrap

h-wrap

h-wrap

h-wrap

h-wrap

h-wrap

hide code 
<div class="h-flex h-flex-row h-wrap">
    <div class="h-highlight-block m-x-l p-x-xl -dark"><p>h-wrap</p></div>
    <div class="h-highlight-block m-x-l p-x-xl -dark"><p>h-wrap</p></div>
    <div class="h-highlight-block m-x-l p-x-xl -dark"><p>h-wrap</p></div>
    <div class="h-highlight-block m-x-l p-x-xl -dark"><p>h-wrap</p></div>
    <div class="h-highlight-block m-x-l p-x-xl -dark"><p>h-wrap</p></div>
    <div class="h-highlight-block m-x-l p-x-xl -dark"><p>h-wrap</p></div>
</div>

# Extra Styling

# Column Divider

.h-flex-row.h-flex-divider

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

hide code 
<div class="h-flex h-flex-row h-flex-divider">
    <div class="h-flex-item h-width-50 p-l">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    </div>
    <div class="h-flex-item h-width-50 p-l">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    </div>
</div>

← Simple Responsive Grid →