CSS place-self property

Description

CSS place-self property places an element horizontally and vertically. It is a shorthand property of align-self and justify-self.

Syntax

place-self : align-self   justify-self

Property values

align-self

autoDefault

It stretches out the element vertically to fill the width of container completely.

align-self: auto;

baseline

It aligns the element on the baseline.

align-self: baseline;

center

It aligns the content at the middle of cotainer.

align-self: center;

stretch

It stretches the element so as fill the width of container completely.

align-self: stretch;

flex-start

flex-start aligns the current element at the start of flex container.

align-self: flex-start;

flex-end

flex-end aligns the current element at the end of the flex container.

align-self: flex-end;

justify-self

autoDefault

It stretches out the element vertically to fill the width of container completely.

justify-self: auto;

baseline

It aligns the element on the baseline.

justify-self: baseline;

center

It aligns the content at the middle of cotainer.

justify-self: center;

stretch

It stretches the element so as fill the width of container completely.

justify-self: stretch;

flex-start

flex-start aligns the current element at the start of flex container.

justify-self: flex-start;

flex-end

flex-end aligns the current element at the end of the flex container.

justify-self: flex-end;

Applicable to

It applies to block-level boxes, absolutely-positioned boxes, and grid items.

#CSS digger
Was this article helpful?

 
arrow

#First 1

×

Ctrl+D