• 設置.align-items可定義flex items在flex容器的縱軸方向上的對齊方式。
• 在Flex外容器設置.align-items-start可讓flex items縱軸起始位置的邊界緊靠住該行的縱轴起始邊界。
• 在Flex外容器設置.align-items-end可讓flex items縱軸起始位置的邊界緊靠住該行的縱轴結束邊界。
• 在Flex外容器設置.align-items-center可讓flex items在該行的縱軸上居中放置。
• 在Flex外容器設置.align-items-baseline，若flex items的行內軸與縱軸相同，則該值與.align-items-start等效
• 在Flex外容器設置.align-items-stretch可讓flex items自適應外容器高度。
• 範例

<div class="d-flex align-items-start bg-primary text-white" style="height: 100px;">
     <div class="p-2 mr-1 border border-dark">Flex item 1</div>
     <div class="p-2 mr-1 border border-dark">Flex item 2</div>
     <div class="p-2 border border-dark">Flex item 3</div>
</div>
<div class="d-flex align-items-end bg-primary text-white mt-1" style="height: 100px;">
     <div class="p-2 mr-1 border border-dark">Flex item 1</div>
     <div class="p-2 mr-1 border border-dark">Flex item 2</div>
     <div class="p-2 border border-dark">Flex item 3</div>
</div>
<div class="d-flex align-items-center bg-primary text-white mt-1" style="height: 100px;">
     <div class="p-2 mr-1 border border-dark">Flex item 1</div>
     <div class="p-2 mr-1 border border-dark">Flex item 2</div>
     <div class="p-2 border border-dark">Flex item 3</div>
</div>
<div class="d-flex align-items-baseline bg-primary text-white mt-1" style="height: 100px;">
     <div class="p-2 mr-1 border border-dark">Flex item 1</div>
     <div class="p-2 mr-1 border border-dark">Flex item 2</div>
     <div class="p-2 border border-dark">Flex item 3</div>
</div>
<div class="d-flex align-items-stretch bg-primary text-white mt-1" style="height: 100px;">
     <div class="p-2 mr-1 border border-dark">Flex item 1</div>
     <div class="p-2 mr-1 border border-dark">Flex item 2</div>
     <div class="p-2 border border-dark">Flex item 3</div>
</div>

• 成果