Flex Box

The page is about properties for the flex container (i.e. usesdisplay: flex), NOT the elements inside it.

The following are properties for the flex container:

Left and Right Align

Use the following on the parent container.

  • display: flex;
  • justify-content: flex-end;
    • justify-content property also has values: center,flex-start,space-around, space-between, and space-evenly
.rightFlexBox{
    display:flex;
    justify-content: flex-end;
}
.rightFlexBox > div{
    border: 3px solid var(--contrastColor1);
}

<div class='rightFlexBox'>
    <div>The div element is aligned right.</div>
</div>
The div element is aligned right.

Center Vertically

Use the following on the parent container.

  • display: flex;
  • justify-content: center;
  • align-items: center;
.centerVerticallyFlexBox{
    display:flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    border: 3px solid var(--contrastColor2);
}
.centerVerticalFlexBox > div{
    border: 3px solid var(--contrastColor1);
}

<div class='centerVerticallyFlexBox'>
    <div>The div element is centered vertically.</div>
</div>
The div element is centered vertically.

flex-direction Property

flex-direction: row|row-reverse|column|column-reverse;

flex-wrap Property

flex-wrap: wrap|nowrap|wrap-reverse

Examples:

.flexWrap {
    display:flex;
    flex-wrap: wrap;
    background-color: var(--contrastColor1);
}
1
2
3
4
5
6
7
8
.flexNoWrap {
    display:flex;
    flex-wrap: nowrap;
    background-color: var(--contrastColor1);
}
1
2
3
4
5
6
7
8
.flexWrapReverse {
    display:flex;
    flex-wrap: wrap-reverse;
    background-color: var(--contrastColor1);
}
1
2
3
4
5
6
7
8

justify-content Property

justify-content: center|flex-start|flex-end|space-around|space-between|space-evenly;
  • justify-content: adjust the horizontal spacing

Examples:

.flexCenter {
    display:flex;
    justify-content: center;
    background-color: var(--contrastColor1);
}
1
2
3
.flexEnd {
    display:flex;
    justify-content: flex-end;
    background-color: var(--contrastColor1);
}
1
2
3
.flexSpaceAround {
    display:flex;
    justify-content: space-around;
    background-color: var(--contrastColor1);
}
1
2
3
.flexSpaceBetween {
    display:flex;
    justify-content: space-between;
    background-color: var(--contrastColor1);
}
1
2
3
.flexSpaceEvenly {
    display:flex;
    justify-content: space-evenly;
    background-color: var(--contrastColor1);
}
1
2
3

align-items Property

align-items: center|flex-start|flex-end|stretch|baseline|normal;
  • align-items: adjust the vertical spacing

Examples:

.flexVerticalCenter {
    display:flex;
    align-items: center;
    background-color: var(--contrastColor1);
}
1
2
3
.flexVerticalEnd {
    display:flex;
    align-items: flex-end;
    background-color: var(--contrastColor1);
}
1
2
3
.flexStretch {
    display:flex;
    align-items: stretch;
    background-color: var(--contrastColor1);
}
1
2
3
.flexBaseline {
    display:flex;
    align-items: baseline;
    background-color: var(--contrastColor1);
} /* it's aligned by the text baseline */

1

2

3

Reference

Examples from W3 School: www.w3schools.com/css/css3_flexbox_container.asp