CSS place-content property

Property values

align-content

normalDefault

It stretches out the descendant elements to fill the height completely.

align-content: normal;

Try it { }

baseline

It aligns multiple objects (elements) on same shared space such as cells within a row.

align-content: baseline;

Try it { }

center

It aligns the content elements at the middle of cotainer.

align-content: center;

Try it { }

stretch

It stretches all of the objects (elements) in such a way that they occupy the full height of the container.

align-content: stretch;

Try it { }

flex-start

flex-start aligns the content at the start of flex container.

align-content: flex-start;

Try it { }

flex-end

flex-end aligns the content at the end of the flex container.

align-content: flex-end;

Try it { }

space-between

In this case, first object is aligned at the start of container and last object is aligned at the end of the container. The remaining objects are placed in such a way that white space is distributed equally among any two objects. Learn more about css space between.

align-content: space-between;

Try it { }

space-around

The objects are distributed in such a way that there is same space between the objects except at the start and end of the container. There is half sized space (half of the space that is between any two objects) before the first object and after the last object.

align-content: space-around;

Try it { }

space-evenly

It adjusts the alignment of objects so as to distribute equal space between and around the objects.

align-content: space-evenly;

Try it { }

justify-content

normalDefault

It stretches out the descendant elements to fill the height completely.

justify-content: normal;

Try it { }

baseline

It aligns multiple objects (elements) on same shared space such as cells within a row.

justify-content: baseline;

Try it { }

center

It aligns the content elements at the middle of cotainer.

justify-content: center;

Try it { }

stretch

It stretches all of the objects (elements) in such a way that they occupy the full height of the container.

justify-content: stretch;

Try it { }

flex-start

flex-start aligns the content at the start of flex container.

justify-content: flex-start;

Try it { }

flex-end

flex-end aligns the content at the end of the flex container.

justify-content: flex-end;

Try it { }

space-between

In this case, first object is aligned at the start of container and last object is aligned at the end of the container. The remaining objects are placed in such a way that white space is distributed equally among any two objects.

justify-content: space-between;

Try it { }

space-around

The objects are distributed in such a way that there is same space between the objects except at the start and end of the container. There is half sized space (half of the space that is between any two objects) before the first object and after the last object.

justify-content: space-around;

Try it { }

space-evenly

It adjusts the alignment of objects so as to distribute equal space between and around the objects.

justify-content: space-evenly;

Try it { }