Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
alignment
web dev

How to align elements in flex and grids

Educative Answers Team

The CSS align-items property is used to align children elements inside a flex or grid container element. align-items sets the align-self value on all direct children as a group.
In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.

Syntax

align-items: stretch|center|start|end|baseline|initial|inherit;

Default value: stretch.

For the list of all possible values, check out the official docs.

svg viewer

Implementation

We make the container a Flexbox by setting display: flex. Next, we set the align-items property to the center value, which aligns each div item in the center.

Try experimenting with different values like stretch and start for align-items.

  • HTML
  • CSS

RELATED TAGS

css
alignment
web dev
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring