How to use flex properties? – Part 2

Click here more details about “How to use flex properties? – Part 1” article

Parent flex container properties

• justify-content
• align-items
• align-content

---

5. justify-content

This property used to align the flex items.

{ justify-content: flex-start | flex-end | center | space-around | space-between | space-evenly }

This property horizontally aligns all flex items when items do not use all available space.

– See usage and the differences shown in the below examples.

justify-content: flex-start

CSS

HTML

flex-start: flex items display towards start of the line. This is default value of “justify-content” property.

justify-content: flex-end

CSS

HTML

flex-end: flex items display towards end of the line.

justify-content: center

CSS

HTML

center: flex items display centered of the line.

justify-content: space-around

CSS

HTML

space-around: flex items distributed evenly with equal space around the each flex item. Each item applies its own spacing.

justify-content: space-between

CSS

HTML

space-between: flex items with space distributed evenly between lines, first item is on the start line and last item is on the end line.

justify-content: space-evenly

CSS

HTML

space-evenly: flex items distributed in equal spacing between any two items.

---

6. align-items

{ align-items: flex-start | flex-end | center | stretch | baseline }

This property vertically aligns all flex items when items do not use all available space.

– See usage and the differences shown in the below examples.

align-items: flex-start

CSS

HTML

flex-start: Items inside flex container align at the top of the container.

align-items: flex-end

CSS

HTML

flex-end: Items inside flex container align at the bottom of the container.

align-items: center

CSS

HTML

center: Items inside flex container displays vertically centered.

align-items: stretch

CSS

HTML

stretch: All flex items are stretch to fit the container.

align-items: baseline

CSS

HTML

baseline: All flex items align at the baseline of the flex container.

---

7. align-content

{ align-content: flex-start | flex-end | center | stretch | space-between | space-around }

This property modifies the behavior of the “flex-wrap” property. It is similar as the property of “align-items”, but it aligns flex lines not flex items.

Note: This property only work is there is multiple lines of flex items. There is no effect on one line flex items.

– See usage and the differences shown in the below examples.

align-content: flex-start

CSS

HTML

flex-start: All lines align toward the start of the flex container.

align-content: flex-end

CSS

HTML

flex-end: All lines align toward the end of the flex container.

align-content: center

CSS

HTML

center: All lines displays vertically centered.

align-content: stretch

CSS

HTML

stretch: All lines equally stretch to take up the remaining space.

align-content: space-between

CSS

HTML

space-between: All lines evenly distributed in the flex container.

align-content: space-around

CSS

HTML

space-around: All lines evenly distributed in the flex container with equal space applies around each line.

Click to see demo page for all the above examples.

This Article is TAGGED in CSS Display Property. BOOKMARK THE permalink.