Flex

danger

This component will be marked as deprecated and removed in an upcoming version of the component library.

Please avoid using this component in new implementations and consider replacing its current implementation with dhl-grid-container in combination with dhl-grid-cell.

A layout utility Flex component which exposes short-hand flex properties to quickly create flex layouts.

Import

React

// with @dhl-official/react-library:
import { DhlFlex } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlFlex } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-flex></dhl-flex>

Vue.js

// with @dhl-official/vue-library:
import { DhlFlex } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlFlex } from "@dhl-official/ui-libraries/vue-library"

Code

React

<DhlFlex>
    <DhlButton>0</DhlButton>
    <DhlButton>1</DhlButton>
    <DhlButton>2</DhlButton>
    <DhlButton>3</DhlButton>
</DhlFlex>

Angular

<dhl-flex>
    <dhl-button>0</dhl-button>
    <dhl-button>1</dhl-button>
    <dhl-button>2</dhl-button>
    <dhl-button>3</dhl-button>
</dhl-flex>

Vue.js

<dhl-flex>
    <dhl-button>0</dhl-button>
    <dhl-button>1</dhl-button>
    <dhl-button>2</dhl-button>
    <dhl-button>3</dhl-button>
</dhl-flex>

info

It is highly recommended to use Design Tokens for spacing values.

However, other valid values are supported if passed as string e.g. "auto" or "12px" for custom cases.

Interactive Demo

Migrating from DUIL 1.0

• No longer supports responsive value array.

Readme

Properties

Property	Attribute	Description	Type	Default
align	align	An optional prop used to define the alignItems value of the flex container.	"baseline" \| "center" \| "end" \| "first baseline" \| "flex-end" \| "flex-start" \| "inherit" \| "initial" \| "last baseline" \| "normal" \| "revert" \| "revert-layer" \| "safe center" \| "start" \| "stretch" \| "unsafe center" \| "unset"	undefined
direction	direction	An optional prop used to define the flex-direction of the flex container.	"column" \| "column-reverse" \| "row" \| "row-reverse"	undefined
gap	gap	An optional prop used to define the gap of the flex container.	string	"var(--dui-size-space-0)"
h	h	[DEPRECATED] An optional prop used to define the height of the flex container.	string	"auto"
height	height	An optional prop used to define the height of the flex container.	string	"auto"
justify	justify	An optional prop used to define the justifyContent value of the flex container.	"center" \| "end" \| "flex-end" \| "flex-start" \| "inherit" \| "initial" \| "left" \| "normal" \| "revert" \| "revert-layer" \| "right" \| "safe center" \| "space-around" \| "space-between" \| "space-evenly" \| "start" \| "stretch" \| "unsafe center" \| "unset"	undefined
m	m	[DEPRECATED] An optional prop used to define the margin of the flex container.	string	"var(--dui-size-space-0)"
margin	margin	An optional prop used to define the margin of the flex container.	string	"var(--dui-size-space-0)"
p	p	[DEPRECATED] An optional prop used to define the padding of the flex container.	string	"var(--dui-size-space-0)"
padding	padding	An optional prop used to define the padding of the flex container.	string	"var(--dui-size-space-0)"
w	w	[DEPRECATED] An optional prop used to define the width of the flex container.	string	"var(--dui-size-space-full)"
width	width	An optional prop used to define the width of the flex container.	string	"var(--dui-size-space-full)"
wrap	wrap	An optional prop used to define the flex-wrap of the flex container.	"inherit" \| "initial" \| "nowrap" \| "revert" \| "revert-layer" \| "unset" \| "wrap" \| "wrap-reverse"	undefined

Slots

Slot	Description
"unnamed"	unnamed children slot for elements to be aligned by DhlFlex

Dependencies

Used by

• dhl-center
• dhl-hstack
• dhl-stack
• dhl-vstack
• dhl-wrap

Graph

---

Built by DHL User Interface Library Team!