Flexbox是一種一維佈局方式，用來分配空間和對齊項目

核心概念

1. Flex Container (容器):設定display:flex的父元素
2. Flex Items (項目):容器內的所有子元素
3. Main Axis (主軸):項目排列的主要方向
4. Cross Axis (交叉軸):垂直於主軸的方向

設定Flex Container

.flex-container {
display: flex;
}

Html

<div class="flex-comtainer">
    <div> 項目一 </div>
    <div> 項目二 </div>
    <div> 項目三 </div>
</div>

完整範例

.flex-container {
      display: flex;/* 啟用 Flexbox 排版 */
      background-color: #f0f8ff;/* 淺藍色背景 */
      padding: 20px;/* 內距 20px */
      gap: 10px; /* 子元素之間間距 10px */
    }
    
    .flex-item {
      background-color: #4CAF50;/* 綠色背景 */
      color: white;/* 白色文字 */
      padding: 20px;/* 內距 20px */
      text-align: center; /* 文字置中 */
    }