CSS justify-self property

Description

CSS justify-self property aligns an element horizontally (main/inline/row axis) within its container by adjusting the margins. We are using a grid container as an example.

Syntax

justify-self : auto | stretch | baseline | center | flex-start | flex-end

Property values

autoDefault

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

justify-self: auto;

stretch

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

justify-self: stretch;

baseline

It aligns the element on the baseline.

justify-self: baseline;

center

It aligns the content at the middle of cotainer.

justify-self: center;

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?

 

#First 1

×

Ctrl+D