0build.dev
Choose a layout

align-items

Report an Issue
Class Description

items-start

Sets align-items: flex-start.

CSS Rules 

.items-start {
  align-items: flex-start;
}

Usage 

<element class="items-start" />

Responsive

Prefix .items-start utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:items-start" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="items-start:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="items-start:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before items-start::before" />

<element class="content-after items-start::after" />
 .items-start Sets align-items: flex-start.

items-end

Sets align-items: flex-end.

CSS Rules 

.items-end {
  align-items: flex-end;
}

Usage 

<element class="items-end" />

Responsive

Prefix .items-end utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:items-end" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="items-end:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="items-end:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before items-end::before" />

<element class="content-after items-end::after" />
 .items-end Sets align-items: flex-end.

items-center

Sets align-items: center. Vertically centers children.

CSS Rules 

.items-center {
  align-items: center;
}

Usage 

<element class="items-center" />

Responsive

Prefix .items-center utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:items-center" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="items-center:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="items-center:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before items-center::before" />

<element class="content-after items-center::after" />
 .items-center Sets align-items: center. Vertically centers children.

items-stretch

Sets align-items: stretch. Children fill the cross axis.

CSS Rules 

.items-stretch {
  align-items: stretch;
}

Usage 

<element class="items-stretch" />

Responsive

Prefix .items-stretch utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:items-stretch" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="items-stretch:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="items-stretch:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before items-stretch::before" />

<element class="content-after items-stretch::after" />
 .items-stretch Sets align-items: stretch. Children fill the cross axis.

items-baseline

Sets align-items: baseline. Aligns children to their text baseline.

CSS Rules 

.items-baseline {
  align-items: baseline;
}

Usage 

<element class="items-baseline" />

Responsive

Prefix .items-baseline utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:items-baseline" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="items-baseline:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="items-baseline:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before items-baseline::before" />

<element class="content-after items-baseline::after" />
 .items-baseline Sets align-items: baseline. Aligns children to their text baseline.

items-end-safe

Aligns items to the cross-axis end using safe, overflow-aware alignment.

CSS Rules 

.items-end-safe {
  align-items: safe flex-end;
}

Usage 

<element class="items-end-safe" />

Responsive

Prefix .items-end-safe utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:items-end-safe" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="items-end-safe:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="items-end-safe:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before items-end-safe::before" />

<element class="content-after items-end-safe::after" />
 .items-end-safe Aligns items to the cross-axis end using safe, overflow-aware alignment.

items-center-safe

Aligns items to the cross-axis center using safe, overflow-aware alignment.

CSS Rules 

.items-center-safe {
  align-items: safe center;
}

Usage 

<element class="items-center-safe" />

Responsive

Prefix .items-center-safe utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:items-center-safe" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="items-center-safe:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="items-center-safe:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before items-center-safe::before" />

<element class="content-after items-center-safe::after" />
 .items-center-safe Aligns items to the cross-axis center using safe, overflow-aware alignment.

items-baseline-last

Aligns items using their last baseline.

CSS Rules 

.items-baseline-last {
  align-items: last baseline;
}

Usage 

<element class="items-baseline-last" />

Responsive

Prefix .items-baseline-last utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:items-baseline-last" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="items-baseline-last:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="items-baseline-last:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before items-baseline-last::before" />

<element class="content-after items-baseline-last::after" />
 .items-baseline-last Aligns items using their last baseline.