📪Place
Place Content Classes
.place-normal
Sets the place-content property to normal, allowing the flex container to determine the placement behavior.
CSS equivalent: place-content: normal;
Example usage:
<div class="place-normal">This element follows the normal placement behavior determined by the flex container.</div>.place-start
Sets the place-content property to start, aligning the content to the start of both the main and cross axes within the flex container.
CSS equivalent: place-content: start;
Example usage:
<div class="place-start">This element is aligned to the start of both the main and cross axes within the flex container.</div>.place-end
Sets the place-content property to end, aligning the content to the end of both the main and cross axes within the flex container.
CSS equivalent: place-content: end;
Example usage:
<div class="place-end">This element is aligned to the end of both the main and cross axes within the flex container.</div>.place-flex-start
Sets the place-content property to flex-start, aligning the content to the start of the main axis and centering it along the cross axis within the flex container.
CSS equivalent: place-content: flex-start;
Example usage:
<div class="place-flex-start">This element is aligned to the start of the main axis and centered along the cross axis within the flex container.</div>.place-flex-end
Sets the place-content property to flex-end, aligning the content to the end of the main axis and centering it along the cross axis within the flex container.
CSS equivalent: place-content: flex-end;
Example usage:
<div class="place-flex-end">This element is aligned to the end of the main axis and centered along the cross axis within the flex container.</div>.place-center
Sets the place-content property to center, centering the content both horizontally and vertically within the flex container.
CSS equivalent: place-content: center;
Example usage:
<div class="place-center">This element is centered both horizontally and vertically within the flex container.</div>.place-space-between
Sets the place-content property to space-between, distributing the content evenly along the main axis with the first item at the start and the last item at the end.
CSS equivalent: place-content: space-between;
Example usage:
<div class="place-space-between">This element distributes its content evenly along the main axis with space between items.</div>.place-space-around
Sets the place-content property to space-around, distributing the content evenly along the main axis with equal space before the first item and after the last item.
CSS equivalent: place-content: space-around;
Example usage:
<div class="place-space-around">This element distributes its content evenly along the main axis with space around items.</div>.place-space-evenly
Sets the place-content property to space-evenly, distributing the content evenly along the main axis with equal space between items.
CSS equivalent: place-content: space-evenly;
Example usage:
<div class="place-space-evenly">This element distributes its content evenly along the main axis with space evenly between items.</div>.place-stretch
Sets the place-content property to stretch, stretching the content to fill the available space along the main axis.
CSS equivalent: place-content: stretch;
Example usage:
<div class="place-stretch">This element stretches its content to fill the available space along the main axis.</div>.place-safe-center
Sets the place-content property to safe center, centering the content both horizontally and vertically within the flex container while ensuring it stays within the safe area.
CSS equivalent: place-content: safe center;
Example usage:
<div class="place-safe-center">This element is centered both horizontally and vertically within the flex container, staying within the safe area.</div>.place-unsafe-center
Sets the place-content property to unsafe center, centering the content both horizontally and vertically within the flex container, even if it goes beyond the safe area.
CSS equivalent: place-content: unsafe center;
Place Items Classes
.place-items-normal
Sets the place-items property to normal, allowing the flex container to determine the placement behavior of its items.
CSS equivalent: place-items: normal;
Example usage:
<div class="place-items-normal">The items within this flex container follow the normal placement behavior determined by the container.</div>.place-items-start
Sets the place-items property to start, aligning the items to the start of both the main and cross axes within the flex container.
CSS equivalent: place-items: start;
Example usage:
<div class="place-items-start">The items within this flex container are aligned to the start of both the main and cross axes.</div>.place-items-end
Sets the place-items property to end, aligning the items to the end of both the main and cross axes within the flex container.
CSS equivalent: place-items: end;
Example usage:
<div class="place-items-end">The items within this flex container are aligned to the end of both the main and cross axes.</div>.place-items-flex-start
Sets the place-items property to flex-start, aligning the items to the start of the main axis and centering them along the cross axis within the flex container.
CSS equivalent: place-items: flex-start;
Example usage:
<div class="place-items-flex-start">The items within this flex container are aligned to the start of the main axis and centered along the cross axis.</div>.place-items-flex-end
Sets the place-items property to flex-end, aligning the items to the end of the main axis and centering them along the cross axis within the flex container.
CSS equivalent: place-items: flex-end;
Example usage:
<div class="place-items-flex-end">The items within this flex container are aligned to the end of the main axis and centered along the cross axis.</div>.place-items-center
Sets the place-items property to center, centering the items both horizontally and vertically within the flex container.
CSS equivalent: place-items: center;
Example usage:
<div class="place-items-center">The items within this flex container are centered both horizontally and vertically.</div>.place-items-baseline
Sets the place-items property to baseline, aligning the items such that their baselines are aligned within the flex container.
CSS equivalent: place-items: baseline;
Example usage:
<div class="place-items-baseline">The items within this flex container are aligned based on their baselines.</div>.place-items-stretch
Sets the place-items property to stretch, stretching the items to fill the available space along the main axis.
CSS equivalent: place-items: stretch;
Example usage:
<div class="place-items-stretch">The items within this flex container are stretched to fill the available space along the main axis.</div>.place-items-safe-center
Sets the place-items property to safe center, centering the items both horizontally and vertically within the flex container while ensuring they stay within the safe area.
CSS equivalent: place-items: safe center;
Example usage:
<div class="place-items-safe-center">The items within this flex container are centered both horizontally and vertically, staying within the safe area.</div>.place-items-unsafe-center
Sets the place-items property to unsafe center, centering the items both horizontally and vertically within the flex container, even if they go beyond the safe area.
CSS equivalent: place-items: unsafe center;
Example usage:
<div class="place-items-unsafe-center">The items within this flex container are centered both horizontally and vertically, even if they go beyond the safe area.</div>These classes can be applied to flex containers to control the alignment behavior of their items along both the main and cross axes.
Example usage:
<div class="place-unsafe-center">This element is centered both horizontally and vertically within the flex container, even if it goes beyond the safe area.</div>Place Self Classes
.place-self-auto
Sets the place-self property to auto, allowing the flex item to inherit the alignment behavior specified by the flex container.
CSS equivalent: place-self: auto;
Example usage:
<div class="place-self-auto">The alignment behavior of this flex item is inherited from the flex container.</div>.place-self-normal
Sets the place-self property to normal, allowing the flex item to follow the normal placement behavior determined by the flex container.
CSS equivalent: place-self: normal;
Example usage:
<div class="place-self-normal">This flex item follows the normal placement behavior determined by the flex container.</div>.place-self-start
Sets the place-self property to start, aligning the flex item to the start of both the main and cross axes within the flex container.
CSS equivalent: place-self: start;
Example usage:
<div class="place-self-start">This flex item is aligned to the start of both the main and cross axes within the flex container.</div>.place-self-end
Sets the place-self property to end, aligning the flex item to the end of both the main and cross axes within the flex container.
CSS equivalent: place-self: end;
Example usage:
<div class="place-self-end">This flex item is aligned to the end of both the main and cross axes within the flex container.</div>.place-self-flex-start
Sets the place-self property to flex-start, aligning the flex item to the start of the main axis and centering it along the cross axis within the flex container.
CSS equivalent: place-self: flex-start;
Example usage:
<div class="place-self-flex-start">This flex item is aligned to the start of the main axis and centered along the cross axis within the flex container.</div>.place-self-flex-end
Sets the place-self property to flex-end, aligning the flex item to the end of the main axis and centering it along the cross axis within the flex container.
CSS equivalent: place-self: flex-end;
Example usage:
<div class="place-self-flex-end">This flex item is aligned to the end of the main axis and centered along the cross axis within the flex container.</div>.place-self-center
Sets the place-self property to center, centering the flex item both horizontally and vertically within the flex container.
CSS equivalent: place-self: center;
Example usage:
<div class="place-self-center">This flex item is centered both horizontally and vertically within the flex container.</div>.place-self-baseline
Sets the place-self property to baseline, aligning the flex item based on its baseline within the flex container.
CSS equivalent: place-self: baseline;
Example usage:
<div class="place-self-baseline">This flex item is aligned based on its baseline within the flex container.</div>.place-self-stretch
Sets the place-self property to stretch, stretching the flex item to fill the available space along the main axis.
CSS equivalent: place-self: stretch;
Example usage:
<div class="place-self-stretch">This flex item is stretched to fill the available space along the main axis.</div>.place-self-safe-center
Sets the place-self property to safe center, centering the flex item both horizontally and vertically within the flex container while ensuring it stays within the safe area.
CSS equivalent: place-self: safe center;
Example usage:
<div class="place-self-safe-center">This flex item is centered both horizontally and vertically, staying within the safe area.</div>.place-self-unsafe-center
Sets the place-self property to unsafe center, centering the flex item both horizontally and vertically within the flex container, even if it goes beyond the safe area.
CSS equivalent: place-self: unsafe center;
Example usage:
<div class="place-self-unsafe-center">This flex item is centered both horizontally and vertically, even if it goes beyond the safe area.</div>These classes can be applied to flex items within a flex container to control their individual alignment behavior within the container.
Last updated