0build.dev
Choose a layout

justify-content

Report an Issue
Class Description

justify-normal

Sets justify-content to normal, using the default content justification behavior.

CSS Rules 

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

Usage 

<element class="justify-normal" />

Responsive

Prefix .justify-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:justify-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="justify-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="justify-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 justify-normal::before" />

<element class="content-after justify-normal::after" />
 .justify-normal Sets justify-content to normal, using the default content justification behavior.

justify-start

Sets justify-content: flex-start.

CSS Rules 

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

Usage 

<element class="justify-start" />

Responsive

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

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

justify-end

Sets justify-content: flex-end.

CSS Rules 

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

Usage 

<element class="justify-end" />

Responsive

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

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

justify-center

Sets justify-content: center.

CSS Rules 

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

Usage 

<element class="justify-center" />

Responsive

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

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

justify-between

Sets justify-content: space-between.

CSS Rules 

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

Usage 

<element class="justify-between" />

Responsive

Prefix .justify-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:justify-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="justify-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="justify-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 justify-between::before" />

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

justify-around

Sets justify-content: space-around.

CSS Rules 

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

Usage 

<element class="justify-around" />

Responsive

Prefix .justify-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:justify-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="justify-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="justify-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 justify-around::before" />

<element class="content-after justify-around::after" />
 .justify-around Sets justify-content: space-around.

justify-evenly

Sets justify-content: space-evenly.

CSS Rules 

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

Usage 

<element class="justify-evenly" />

Responsive

Prefix .justify-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:justify-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="justify-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="justify-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 justify-evenly::before" />

<element class="content-after justify-evenly::after" />
 .justify-evenly Sets justify-content: space-evenly.

justify-stretch

Sets justify-content: stretch.

CSS Rules 

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

Usage 

<element class="justify-stretch" />

Responsive

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

<element class="content-after justify-stretch::after" />
 .justify-stretch Sets justify-content: stretch.

justify-end-safe

Justifies content to the end, falling back to start alignment when space is insufficient (overflow-safe).

CSS Rules 

.justify-end-safe {
  justify-content: safe flex-end;
}

Usage 

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

Responsive

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

<element class="content-after justify-end-safe::after" />
 .justify-end-safe Justifies content to the end, falling back to start alignment when space is insufficient (overflow-safe).

justify-center-safe

Justifies content to the center, falling back to start alignment when space is insufficient (overflow-safe).

CSS Rules 

.justify-center-safe {
  justify-content: safe center;
}

Usage 

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

Responsive

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

<element class="content-after justify-center-safe::after" />
 .justify-center-safe Justifies content to the center, falling back to start alignment when space is insufficient (overflow-safe).