あd-flex（d-inline-flex）クラスを追加すると、要素はflexコンテナとなり、子要素は自動的にflexアイテムとなる
flexコンテナ
inlineのflexコンテナ
▼ベースとなるflexのheightは設定無
Flex 1
Flex 2ああああああああああああああああああああ
Flex 3
▼ベースとなるflexのheightは100px
Flex 1
Flex 2
Flex 3
▼ベースとなるflexのheightは100px。主軸（横軸）方向の整列。justify-content-center ※justify-content-{画面幅}-{整列方法}
Flex 1
Flex 2
Flex 3
▼ベースとなるflexのheightは100px。交差軸（縦軸）方向の整列（align-items-center）
Flex 1
Flex 2Flex 2Flex 2Flex 2Flex 2
Flex 3
Flex 3
Flex 3
▼ベースとなるflexのheightは100px。個別flexアイテムの交差軸上の整列。 align-self-{画面幅}-{整列方法}の指定も可能
div1
div 2 align-self-start
div 3
▼ベースとなるflexのheightは100px。flexコンテナ内で等幅で整列。ただし中身によって伸縮する。 flex-{画面幅}-fillの指定も可能
div1 flex-fill
div 2 flex-fill
div 3 flex-fill
div1 flex-fill
div 2 flex-fillあああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
div 3 flex-fill
▼flexアイテムを折り返さない flex-nowrap
div1
div 2あああ
div 3
div4
div 5あああ
div 6
div7
div 8あああ
div 9
div10
div 11あああ
div 12
div13
div 14あああ
div 15ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
▼flexアイテムを折り返す flex-wrap
div1
div 2あああ
div 3
div4
div 5あああ
div 6
div7
div 8あああ
div 9
div10
div 11あああ
div 12
div13
div 14あああ
div 15ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
▼自動マージンで分離：自動マージンなし
div1
div 2あああ
div 3
▼自動マージンで分離：右側に分離 mr-auto
div1 mr-auto
div 2あああ
div 3
▼自動マージンで分離：左側に分離 ml-auto
div1
div 2あああ
div 3 ml-auto
▼複数行におけるflexアイテム交差軸の整列 align-content-between ※flex-wrap適用、ベースのコンテナはw200 h200
div1
div 2あああ
div 3
div4
div 5あああ
div 6
div7
div 8あああ
div 9
div10
div 11あああ
div 12
div13
div 14あああ
div 15あああ