0build.dev
Choose a layout

align-content

Report an Issue
Class Description

content-normal

Restores normal align-content packing for wrapped lines.

CSS Rules 

.content-normal {
  align-content: normal;
}

Usage 

<element class="content-normal" />

Responsive

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

<element class="md:content-normal" />

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="content-normal: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="content-normal: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 content-normal::before" />

<element class="content-after content-normal::after" />
 .content-normal Restores normal align-content packing for wrapped lines.

content-center

Sets align-content: center.

CSS Rules 

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

Usage 

<element class="content-center" />

Responsive

Prefix .content-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:content-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="content-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="content-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 content-center::before" />

<element class="content-after content-center::after" />
 .content-center Sets align-content: center.

content-start

Sets align-content: flex-start.

CSS Rules 

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

Usage 

<element class="content-start" />

Responsive

Prefix .content-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:content-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="content-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="content-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 content-start::before" />

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

content-end

Packs wrapped lines toward the end of the cross axis.

CSS Rules 

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

Usage 

<element class="content-end" />

Responsive

Prefix .content-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:content-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="content-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="content-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 content-end::before" />

<element class="content-after content-end::after" />
 .content-end Packs wrapped lines toward the end of the cross axis.

content-between

Sets align-content: space-between.

CSS Rules 

.content-between {
  align-content: space-between;
}

Usage 

<element class="content-between" />

Responsive

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

<element class="md:content-between" />

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="content-between: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="content-between: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 content-between::before" />

<element class="content-after content-between::after" />
 .content-between Sets align-content: space-between.

content-around

Distributes wrapped lines with space around each line.

CSS Rules 

.content-around {
  align-content: space-around;
}

Usage 

<element class="content-around" />

Responsive

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

<element class="md:content-around" />

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="content-around: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="content-around: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 content-around::before" />

<element class="content-after content-around::after" />
 .content-around Distributes wrapped lines with space around each line.

content-evenly

Distributes wrapped lines with equal space between them.

CSS Rules 

.content-evenly {
  align-content: space-evenly;
}

Usage 

<element class="content-evenly" />

Responsive

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

<element class="md:content-evenly" />

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="content-evenly: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="content-evenly: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 content-evenly::before" />

<element class="content-after content-evenly::after" />
 .content-evenly Distributes wrapped lines with equal space between them.

content-baseline

Aligns wrapped lines to a shared baseline.

CSS Rules 

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

Usage 

<element class="content-baseline" />

Responsive

Prefix .content-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:content-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="content-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="content-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 content-baseline::before" />

<element class="content-after content-baseline::after" />
 .content-baseline Aligns wrapped lines to a shared baseline.

content-stretch

Stretches wrapped lines to fill the container's cross axis.

CSS Rules 

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

Usage 

<element class="content-stretch" />

Responsive

Prefix .content-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:content-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="content-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="content-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 content-stretch::before" />

<element class="content-after content-stretch::after" />
 .content-stretch Stretches wrapped lines to fill the container's cross axis.