Flex
Flexbox utilities help arrange a group of items in a single direction. A parent element with flexbox will position all of its direct child elements.
Flex
Arranges the direct children of an element horizontally.
You can override several defaults by using the following custom properties in an inline style attribute.
| Custom Property | Default Value | Description |
|---|---|---|
--flex-align |
center | Vertical alignment of flex items (align-items) |
--flex-gap |
8px | Space between flex items (gap) |
--flex-justify |
flex-start | Horizontal alignment of flex items (justify-content) |
--flex-wrap |
nowrap | Whether flex content should wrap |
Example
Three icon buttons aligned horizontally. Gap between icons increased to 16px.
HTML
<div class="pv-flex" style="--flex-gap: 1rem">
<button type="button" class="pv-button-icon">...</button>
<button type="button" class="pv-button-icon">...</button>
<button type="button" class="pv-button-icon">...</button>
</div>Flex Vertical
Behaves exactly like the flex utility but is set to flex-direction: column. --flex-align is unset to the default of stretch. --flex-align and --flex-justify work on opposite axes.
| Custom Property | Default Value | Description |
|---|---|---|
--flex-align |
unset (defaults to `stretch`) | Horizontal alignment of flex items (align-items) |
--flex-gap |
8px | Space between flex items (gap) |
--flex-justify |
flex-start | Vertical alignment of flex items (justify-content) |
--flex-wrap |
nowrap | Whether flex content should wrap |
Example
Using flex vertical to push a row of buttons to the bottom of a container using pv-flex-item on the first child.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis voluptatem placeat ducimus, est ut, quasi nam quisquam necessitatibus aliquam nesciunt sed sequi omnis maiores earum eligendi. Corrupti quaerat sed impedit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi adipisci, facilis assumenda tempore exercitationem corrupti quis voluptas pariatur vitae in, inventore officia accusamus, voluptatibus laudantium delectus ab labore repellendus dolorem.
HTML
<div class="pv-flex-vertical pv-bordered" style="min-height: 500px; --flex-align: stretch">
<div class="pv-surface pv-inset-square pv-flow pv-flex-item">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis voluptatem placeat ducimus, est ut, quasi nam quisquam necessitatibus aliquam nesciunt sed sequi omnis maiores earum eligendi. Corrupti quaerat sed impedit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi adipisci, facilis assumenda tempore exercitationem corrupti quis voluptas pariatur vitae in, inventore officia accusamus, voluptatibus laudantium delectus ab labore repellendus dolorem.</p>
</div>
<div class="pv-surface-accent pv-inset-squish pv-border-top pv-flex" style="--flex-justify: center">
<button type="button" class="pv-button-primary">Submit</button>
</div>
</div>Inline Flex
Add -inline to the flex utility to change the display property to from flex to inline-flex, making this element behave like an inline element rather than a block element. It also sets the default --flex-gap to 0.
Example
Using inline flex to add an icon to a tag.
HTML
<span class="pv-flex-inline pv-tag-red">
<svg aria-hidden="true" class="pv-icon">
<title>arrow-down</title>
<use xlink:href="#arrow-down"></use>
</svg>
23
</span>Flex Responsive
Add -responsive to the flex utility to set the flex direction to column on small screens.
| Custom Property | Default Value | Description |
|---|---|---|
--flex-align |
center | Horizontal alignment of flex items (align-items) above or equal to 768px |
--flex-align-small |
unset | Horizontal alignment of flex items (align-items) below 768px |
Example
Using flex responsive to flex horizontally on large screens and vertically on small screens.
HTML
<div class="pv-flex-responsive" style="--flex-gap: 1rem">
<button type="button" class="pv-button-icon">...</button>
<button type="button" class="pv-button-icon">...</button>
<button type="button" class="pv-button-icon">...</button>
</div>Example
Use flex responsive custom props to adjust the flex alignment on different screen sizes.
123,456 Total Hospitals
HTML
<div class="pv-flex-responsive" style="--flex-align-small: end; --flex-align: center;">
<pv-dropdown-auto-close class="pv-dropdown pv-width-responsive" style="--min-width-small: 100%; --min-width-large: 240px;">
<button type="button" class="pv-select-multiple pv-input-small pv-text-default" onclick="this.toggleAttribute('data-dropdown')">All States</button>
<div class="pv-popover pv-full-width">
<ul role="list" class="pv-popover-list">
<li>
<a href="#">All States</a>
</li>
<li>
<a href="#">Texas</a>
</li>
</ul>
</div>
</pv-dropdown-auto-close>
<p>123,456 Total Hospitals</p>
</div>Space Between
Arranges the direct children of an element horizontally and distributes any remaining available space in between elements. Identical to Flex except the justify-content property is set to space-between by default. Ideal for placing two items on the left and right edges of a container.
| Custom Property | Default Value | Description |
|---|---|---|
--flex-align |
center | Vertical alignment of flex items (align-items) |
--flex-gap |
8px | Space between flex items (gap) |
Example
An icon button and the group of icon buttons from the previous example spaced on opposite sides of the container.
HTML
<div class="pv-space-between">
<button type="button" class="pv-button-icon">...</button>
<div class="pv-flex" style="--flex-gap: 1rem">
<button type="button" class="pv-button-icon">...</button>
<button type="button" class="pv-button-icon">...</button>
<button type="button" class="pv-button-icon">...</button>
</div>
</div>Flex Item
Use the flex item utility to make an item take up all available horizontal space or, if applied to multiple elements in the same flex container, the space will be divided equally between those elements.
Example
Two form fields aligned horizontally with flexbox, each with flex-item applied followed by a label and textarea with flex-item applied only to the textarea.
HTML
<div class="pv-space-between">
<div class="pv-flex">
<div class="pv-flex-item">
<label for="first-name">First Name</label>
<input type="text" class="pv-input-text" value="Mike" id="first-name" name="first-name">
</div>
<div class="pv-flex-item">
<label for="last-name">Last Name</label>
<input type="text" class="pv-input-text" value="Aparicio" id="last-name" name="last-name">
</div>
</div>
<div class="pv-flex" style="--flex-align: flex-start">
<label for="comments">Comments</label>
<textarea class="pv-textarea pv-flex-item" id="comments" name="comments"></textarea>
</div>
</div>Resources
-
CSS-Tricks Guide to Flexbox — A great illustrated reference for flexbox and all of its properties.
-
An Interactive Guide to Flexbox — Josh Comeau’s great guide to flexbox includes interactive widgets you can play with to see the effects of various properties.