Flexbox Properties
Responsive and dynamic approach to arranging elements along a single axis (row or column) or both, allowing for easier control over the positioning, sizing, and spacing of elements within a web page: .hpu-d-flex or .hpu-d-inline-flex.
Enable Flexbox Container
Apply the flexbox behavior to the wrapping element. The children elements can be modified with additional flexbox properties discussed in this guide.
.hpu-d-flex
.hpu-d-inline-flex
Flex Direction
Property that defines the primary axis of a flex container and the direction in which flex items are placed within the container.
.flex-row sets the items inside the flex container horizontally. This is the browser default. Use the .flex-row-reverse to start the horizontal direction from the opposite side.
.flex-row
1
2
3
.flex-row-reverse
1
2
3
.flex-col sets the items inside the flex container vertically. Use the .flex-col-reverse to start the vertical direction from the bottom.
.flex-col
1
2
3
.flex-col-reverse
1
2
3
Justify Content
Property that distributes extra space in the container or align items when they do not fully occupy the available space. By default, this controls the alignment in horizontal axis, but controls the vertical axis when .flex-col is used: .flex-jc-{alignment}. Alignment values are *-start, *-end, *-center, *-between, *-around, and *-evenly.
.flex-jc-start (Default)
1
2
3
.flex-jc-center
1
2
3
.flex-jc-end
1
2
3
.flex-jc-between
1
2
3
.flex-jc-around
1
2
3
.flex-jc-evenly
1
2
3
Align Items
Property that controls how flex items are laid out along the cross-axis. The cross-axis is perpendicular to the main axis, which is determined by .flex-direction property: .flex-ai-{alignment} Alignment values are *-start, *-end, *-center, *-baseline, and *-stretch.
In the examples below, each parent container has a .hpu-h12rem height. The numbered boxes use different padding values - .hpu-p-4, .hpu-p-2, and .hpu-p-3 respectively - to demonstrate how each .flex-ai-{alignment} property behaves. Note that when all boxes have the same padding, the differences between alignment properties may not be visually apparent.
.flex-ai-start
1
2
3
.flex-ai-center
1
2
3
.flex-ai-end
1
2
3
.flex-ai-baseline
1
2
3
.flex-ai-stretch (Default)
1
2
3
Align Self
Property that controls the alignment of a single flex item within a flex container along the cross axis, overriding the default alignment set by the container's .flex-ai-{alignment} property: .flex-as-{alignment} Alignment values are *-start, *-end, *-center, *-baseline, and *-stretch.
In the examples below, each parent container has .hpu-h12rem and .flex-ai-stretch, and the middle flex item has the .flex-as-{alignment} values.
(Flex item)
.flex-as-start
(Flex item)
(Flex item)
.flex-as-center
(Flex item)
(Flex item)
.flex-as-end
(Flex item)
(Flex item)
.flex-as-baseline
(Flex item)
(Flex item)
.flex-as-stretch
(Flex item)
Flex Fill
Force the child elements to widths equal to their contents while taking up all the available space: .flex-fill.
Flex item with the longest content among all the flex items
Flex item
Flex item with medium content
Flex Grow and Flex Shrink
The .flex-grow enables a flex item to grow to fill the available space while allowing the other flex items to take only the necessary space for their contents.
The .flex-shrink enables a flex item to shrink if necessary to allow more space for other flex items to take the available space. In the bottom right example, the flex items 1 & 3 are using .flex-fill to use the available space, while the flex item 2 is using the .flex-shrink.
1
2
3
HTML
div class="hpu-d-flex"
div class="hpu-p-2 hpu-bg-2nd hpu-border-1st flex-grow"/div
div class="hpu-p-2 hpu-bg-2nd hpu-border-1st"/div
div class="hpu-p-2 hpu-bg-2nd hpu-border-1st"/div
/div
Responsive variations for .flex-grow are also available:
.flex-grow
.flex-grow-sm
.flex-grow-md
.flex-grow-lg
.flex-grow-xl
.flex-grow-xxl
1
2
3
HTML
div class="hpu-d-flex"
div class="hpu-p-2 hpu-bg-2nd hpu-border-1st flex-fill"/div
div class="hpu-p-2 hpu-bg-2nd hpu-border-1st flex-shrink"/div
div class="hpu-p-2 hpu-bg-2nd hpu-border-1st flex-fill"/div
/div
Responsive variations for .flex-shrink are also available:
.flex-shrink
.flex-shrink-sm
.flex-shrink-md
.flex-shrink-lg
.flex-shrink-xl
.flex-shrink-xxl
Auto Margins
Sometimes in a flex container, it may be necessary to adjust the positioning of a flex item. The auto margin works well in this situation. In the example below, the .hpu-ml-auto pushes the items to the left, and .hpu-mr-auto pushes items to the right.
.hpu-ml-auto
1
2
3
.hpu-mr-auto
1
2
3
Auto Margins with Align Items
Adjust the positioning of a flex item vertically by mixing .flex-ai-{alignment} and auto margins of top and bottom .hpu-{mt|mb}-auto. In the examples below, the parent container is using .hpu-h20rem as the height.
Please refer to HPUCSS Spacing for responsive spacing usage guides.
.flex-ai-start and .hpu-mt-auto
.flex-ai-end and .hpu-mb-auto
Flex Wrap
Determines whether the items should wrap onto multiple lines or stay on a single line. Flex Wrap provides flexibility in layout design by allowing items to automatically reflow within their container, adjusting their positioning to fit the available space: .flex-no-wrap, .flex-wrap, and .flex-wrap-reverse. In the examples below, the parent wrapper use .hpu-h12rem to show the wrapping effects.
.flex-no-wrap (default)
1
2
3
4
5
6
7
.flex-wrap
1
2
3
4
5
6
7
.flex-wrap-reverse
1
2
3
4
5
6
7
Flex Order
Property that allows to control the visual order of flex items within a flex container, irrespective of their actual position in the source code. By assigning numerical values to flex items, the items can be rearranged on the screen, altering the layout flow without changing the structure.
HPU Flex Order encompasses a spectrum of values from 1 to 100, offering a versatile range for creating precise and flexible layouts. These values enable the creation of low-level utility classes, providing granular control over the order of flex items within a webpage: .flex-order-{1 - 100}.
In addition, HPU Flex Order also features .flex-order-first to make sure that a flex item stays as the first item, and .flex-order-last to make sure that a flex item stays as the last item.
In the examples below, the .flex-wrap has been enabled to show the order of the flex items.
.flex-order-{order#}
#7
#77
#4
.flex-order-first
1
first
3
.flex-order-last
last
2
3
Align Content
Property defines how multiple lines of flex items are aligned within the flex container when there is extra space in the cross-axis: .flex-ac-{alignment}. Alignment values are *-start, *-end, *-center, *-between, *-around, and *-evenly.
NOTE: .flex-ac-{alignment} only works if there are multiple lines of flex items and it aligns those lines along the cross-axis of the flex container. This property has no effect if there is only one line of flex items. Thus, flex-wrap: wrap must be enabled to allow flex items to wrap in multiple lines.
In the examples below, .flex-wrap has been added to the wrapping flex container to enable wrapping of the flex items. Also, the container has .hpu-h20rem to set the container height.
.flex-ac-start (default)
1
2
3
4
5
6
7
8
9
10
11
12
.flex-ac-center
1
2
3
4
5
6
7
8
9
10
11
12
.flex-ac-end
1
2
3
4
5
6
7
8
9
10
11
12
.flex-ac-between
1
2
3
4
5
6
7
8
9
10
11
12
.flex-ac-around
1
2
3
4
5
6
7
8
9
10
11
12
.flex-ac-evenly
1
2
3
4
5
6
7
8
9
10
11
12