PatternLab Vite (1.8.12)

Appearance

Flexbox ​

TIP

  • Flexbox Basics: mediaevent.de/css/display-flex or css-tricks.com/almanac/properties/f/flex/
  • Shorthand CSS:
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    • .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

html
<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

html
<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

html
<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

html
<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.

html
<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.</p>
  </div>
</div>

Start / End ​

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

h-end

html
<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.

html
<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.</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.

html
<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.</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.

html
<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.</p>
  </div>
</div>

Flex-Wrap ​

.h-flex-row.h-wrap Wrap items to the next line if they don't fit in the container.

h-wrap

h-wrap

h-wrap

h-wrap

h-wrap

html
<div class="h-flex h-flex-row h-wrap">
  <div class="h-highlight-block h-width-30 -dark"><p>h-wrap</p></div>
  <div class="h-highlight-block h-width-30 -dark"><p>h-wrap</p></div>
  <div class="h-highlight-block h-width-30 -dark"><p>h-wrap</p></div>
  <div class="h-highlight-block h-width-30 -dark"><p>h-wrap</p></div>
  <div class="h-highlight-block h-width-30 -dark"><p>h-wrap</p></div>
  <div class="h-highlight-block h-width-30 -dark"><p>h-wrap</p></div>
</div>

Change Gap Sizes ​

Use T-Shirt sizes or numbers for the gaps just like for spacings, see general Spacing Documentation.

.h-flex[.gap-xxs/.gap-4, .gap-xs/.gap-8, .gap-s/.gap-16, etc.]

Examples: ​

.gap-xs / .gap-8

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

.gap-m / .gap-24

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

.gap-xl / .gap-48

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Extra Styling ​

Column Divider ​

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

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

html
<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.</p>
  </div>
  <div class="h-flex-item h-width-50 p-l">
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
  </div>
</div>

Copyright © 2024 - present Pharma4u