monks_of_style - v1.0.0

monks/justify_content

The CSS justify-content property defines how the browser distributes space between and around content items along the {{Glossary(“main axis”)}} of a flex container and the inline axis of grid and multicol containers.

The interactive example below demonstrates some justify-content values using grid layout.

Values

center

</> 
pub const center: #(String, String)
  • : The items are packed flush to each other toward the center of the alignment container along the main axis.

end

</> 
pub const end: #(String, String)
  • : The items are packed flush to each other toward the end edge of the alignment container in the main axis.

flex_end

</> 
pub const flex_end: #(String, String)
  • : The items are packed flush to each other at the end edge of the alignment container on the flex container’s main-end side. This only applies to flex layout items. For items that are not children of a flex container, this value is treated like end.

flex_start

</> 
pub const flex_start: #(String, String)
  • : The items are packed flush to each other toward the start edge of the alignment container on the flex container’s main-start side. This only applies to flex layout items. For items that are not children of a flex container, this value is treated like start.

inherit

</> 
pub const inherit: #(String, String)

initial

</> 
pub const initial: #(String, String)

left

</> 
pub const left: #(String, String)
  • : The items are packed flush to each other toward the left edge of the alignment container. When the property’s horizontal axis is not parallel with the inline axis, such as when flex-direction: column; is set, this value behaves like start.

normal

</> 
pub const normal: #(String, String)
  • : Behaves as stretch, except in the case of multi-column containers with a non-auto column-width, in which case the columns take their specified column-width rather than stretching to fill the container. As stretch behaves as start in flex containers, normal also behaves as start.

raw

</> 
pub fn raw(value: String) -> #(String, String)

Enter a raw string value for justify-content

revert

</> 
pub const revert: #(String, String)

revert_layer

</> 
pub const revert_layer: #(String, String)
</> 
pub const right: #(String, String)
  • : The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property’s axis is not parallel with the inline axis (in a grid container) or the main-axis (in a flexbox container), this value behaves like start.

safe

</> 
pub const safe: #(String, String)
  • : If the item overflows the alignment container, then the item is aligned as if the alignment mode is start. The desired alignment will not be implemented.

space_around

</> 
pub const space_around: #(String, String)
  • : The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items. If there is only one item, it will be centered.

space_between

</> 
pub const space_between: #(String, String)
  • : The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.

space_evenly

</> 
pub const space_evenly: #(String, String)
  • : The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.

start

</> 
pub const start: #(String, String)
  • : The items are packed flush to each other toward the start edge of the alignment container in the main axis.

stretch

</> 
pub const stretch: #(String, String)
  • : If the combined size of the items along the main axis is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by {{cssxref(“max-height”)}}/{{cssxref(“max-width”)}} (or equivalent functionality), so that the combined size exactly fills the alignment container along the main axis. > [!NOTE] > For flexboxes, the stretch value behaves as flex-start or start. This is because, in flexboxes, stretching is controlled using the {{CSSXref(“flex-grow”)}} property.

unsafe

</> 
pub const unsafe: #(String, String)
  • : Even if the item overflows the alignment container, the desired alignment will be implemented. Unlike safe, which will ignore the desired alignment in favor of preventing overflow.

unset

</> 
pub const unset: #(String, String)

var

</> 
pub fn var(variable: String) -> #(String, String)

Enter a variable name to be used for justify-content. It will be wrapped in var() and have -- prepended.

✨ Search Document