図1に示すように、等間隔のレベル、両端揃え、ランキングトップの垂直配向
HTML：
< divのクラス= "コンテナフレックス" > < divのクラス= "DIV1" > </ divの> < divのクラス= "DIV2" > </ divの> < divのクラス= "DIV3" > </ DIV > </ DIV >
CSS：
.container { 幅：1000px。 マージン：100pxに自動 ; ボーダー：＃333固体1pxの。 高さ：500pxなど。 } .div1 { 幅：100pxに。 高さ：120ピクセル ; 背景色：黄緑色。 } .div2 { 幅：200pxの。 高さ：150ピクセル ; 背景色：鮭 ; } .div3 { 幅：160ピクセル。 高さ：200pxの。 背景色：ビスク。 } .flex { ディスプレイ：フレックス。 正当化-コンテンツ：スペースの間 ; }
効果：
図2に示すように、等間隔の水平、並ぶ2つの端部は、垂直中心
HTML：
< divのクラス= "コンテナフレックス" > < divのクラス= "DIV1" > </ divの> < divのクラス= "DIV2" > </ divの> < divのクラス= "DIV3" > </ DIV > </ DIV >
CSS：
.container { 幅：1000px。 マージン：100pxに自動 ; ボーダー：＃333固体1pxの。 高さ：500pxなど。 } .div1 { 幅：100pxに。 高さ：120ピクセル ; 背景色：黄緑色。 } .div2 { 幅：200pxの。 高さ：150ピクセル ; 背景色：鮭 ; } .div3 { 幅：160ピクセル。 高さ：200pxの。 背景色：ビスク。 } .flex { ディスプレイ：フレックス。 正当化-コンテンツ：スペースの間 ; ALIGN-アイテム：センター ; }
効果：
図3に示すように、水平方向等間隔、両端が揃っており、上下底ランキングと整列
HTML：
<div class="container flex"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </div>
css:
.container{ width: 1000px; margin: 100px auto; border: #333 solid 1px; height: 500px; } .div1{ width: 100px; height: 120px; background-color: yellowgreen; } .div2{ width: 200px; height: 150px; background-color: salmon; } .div3{ width: 160px; height: 200px; background-color: bisque; } .flex{ display: flex; justify-content: space-between; align-items: flex-end; }
效果：
4，水平排列、垂直方向居中对齐
html:
<div class="container flex"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </div>
css:
.container{ width: 1000px; margin: 100px auto; border: #333 solid 1px; height: 500px; } .div1{ width: 100px; height: 120px; background-color: yellowgreen; } .div2{ width: 200px; height: 150px; background-color: salmon; } .div3{ width: 160px; height: 200px; background-color: bisque; } .flex{ display: flex; align-items: center; }
效果：
5，水平居中排列、垂直方向居中对齐
html:
<div class="container flex"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </div>
css:
.container{ width: 1000px; margin: 100px auto; border: #333 solid 1px; height: 500px; } .div1{ width: 100px; height: 120px; background-color: yellowgreen; } .div2{ width: 200px; height: 150px; background-color: salmon; } .div3{ width: 160px; height: 200px; background-color: bisque; } .flex{ display: flex; justify-content: center; align-items: center; }
效果：
6，垂直等距排列、俩端对齐、水平方向居中对齐
html:
<div class="container flex"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </div>
css:
.container{ width: 1000px; margin: 100px auto; border: #333 solid 1px; height: 500px; } .div1{ width: 100px; height: 120px; background-color: yellowgreen; } .div2{ width: 200px; height: 150px; background-color: salmon; } .div3{ width: 160px; height: 200px; background-color: bisque; } .flex{ display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
效果：
7，垂直等距排列、俩端对齐、水平方向居左对齐
html:
<div class="container flex"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </div>
css:
.container{ width: 1000px; margin: 100px auto; border: #333 solid 1px; height: 500px; } .div1{ width: 100px; height: 120px; background-color: yellowgreen; } .div2{ width: 200px; height: 150px; background-color: salmon; } .div3{ width: 160px; height: 200px; background-color: bisque; } .flex{ display: flex; flex-direction: column; justify-content: space-between; }
效果：
8，垂直排列、水平方向居中对齐
html:
<div class="container flex"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </div>
css:
.container{ width: 1000px; margin: 100px auto; border: #333 solid 1px; height: 500px; } .div1{ width: 100px; height: 120px; background-color: yellowgreen; } .div2{ width: 200px; height: 150px; background-color: salmon; } .div3{ width: 160px; height: 200px; background-color: bisque; } .flex{ display: flex; flex-direction: column; align-items: center; }
效果：
