0build.dev
Choose a layout

align-self

Report an Issue
Class Description

self-auto

Sets align-self: auto on a single item.

CSS Rules 

.self-auto {
  align-self: auto;
}

Usage 

<element class="self-auto" />

Responsive

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

<element class="md:self-auto" />

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="self-auto: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="self-auto: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 self-auto::before" />

<element class="content-after self-auto::after" />
 .self-auto Sets align-self: auto on a single item.

self-start

Overrides item alignment to start on the cross axis.

CSS Rules 

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

Usage 

<element class="self-start" />

Responsive

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

<element class="content-after self-start::after" />
 .self-start Overrides item alignment to start on the cross axis.

self-end

Overrides item alignment to end on the cross axis.

CSS Rules 

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

Usage 

<element class="self-end" />

Responsive

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

<element class="content-after self-end::after" />
 .self-end Overrides item alignment to end on the cross axis.

self-center

Sets align-self: center on a single item.

CSS Rules 

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

Usage 

<element class="self-center" />

Responsive

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

<element class="content-after self-center::after" />
 .self-center Sets align-self: center on a single item.

self-stretch

Sets align-self: stretch on a single item.

CSS Rules 

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

Usage 

<element class="self-stretch" />

Responsive

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

<element class="content-after self-stretch::after" />
 .self-stretch Sets align-self: stretch on a single item.

self-baseline

Overrides item alignment to use its baseline.

CSS Rules 

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

Usage 

<element class="self-baseline" />

Responsive

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

<element class="content-after self-baseline::after" />
 .self-baseline Overrides item alignment to use its baseline.

self-end-safe

Overrides item alignment to end on the cross axis with safe overflow handling.

CSS Rules 

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

Usage 

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

Responsive

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

<element class="content-after self-end-safe::after" />
 .self-end-safe Overrides item alignment to end on the cross axis with safe overflow handling.

self-center-safe

Overrides item alignment to center on the cross axis with safe overflow handling.

CSS Rules 

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

Usage 

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

Responsive

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

<element class="content-after self-center-safe::after" />
 .self-center-safe Overrides item alignment to center on the cross axis with safe overflow handling.

self-baseline-last

Overrides item alignment to use its last baseline.

CSS Rules 

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

Usage 

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

Responsive

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

<element class="content-after self-baseline-last::after" />
 .self-baseline-last Overrides item alignment to use its last baseline.