92

Flexbox align-items

The CSS3 flexbox align-items property is used to set the flexible container’s items vertically align when the items do not use all available space on the cross-axis.

Its possible values are:

stretch:It is the default value. It specifies that Items are stretched to fit the container.

flex-start:It sets the items at the top of the container.

flex-end:It sets the items at the bottom of the container.

center:It sets the items at the center of the container (vertically).

baseline:It sets the items at the baseline of the container.

Let’s take some example to demonstrate the usage of above values.

See this example:

---

Example1: (Using stretch value)

This is by default value.

Test it Now

---

Example2: (Using flex-start value)

Test it Now

---

Example3: (Using flex-end value)

Test it Now

---

Example4: (Using center value)

Test it Now

---

Example5: (Using baseline value)

Test it Now

---