indian flagGovernment of India
|
GitHub GitHub

Powered by NeGD | MeitY Government of India® UX4G

Stacks

With the aid of the flexbox utilities and shorthand helpers, component layout is now more quick and simple than before.

In UX4G, stacks provide a shortcut for adding a variety of flexbox attributes to layouts quickly and simply. The open source Pylon project is entirely responsible for the idea and execution.

CAUTION

Heads up! Support for gap utilities with flexbox was recently added to Safari, so consider verifying your intended browser support. Grid layout should have no issues. Read more .

Vertical #

To construct vertical layouts, use .vstack. By default, stacked items are full-width. To add space between objects, use the .gap-* tools.

RESULT
First item
Second item
Third item

Horizontal #

For horizontal layouts, use .hstack. By default, stacked items are vertically centered and only occupy the space necessary for them. To add space between objects, use the .gap-* tools.

RESULT
First item
Second item
Third item

Using horizontal margin utilities like .ms-auto as spacers:

RESULT
First item
Second item
Third item

And with vertical rules:

RESULT
First item
Second item
Third item

Examples #

Use .vstack to stack buttons and other elements:

RESULT

Create an inline form with .hstack:

RESULT

Sass #

.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}