彈性布局（Flexbox）是一種現代化的 CSS 布局方法，它可以讓您更方便地創建響應式和動態布局。在本篇文檔中，我們將介紹彈性布局的基本概念以及如何在項目中使用它。

一、基本概念

1. 容器（Container）：彈性布局由一個容器組成，這個容器負責對其子元素進行排列和對齊。要創建彈性容器，請在 CSS 中將?display?屬性設置為?flex?或?inline-flex。

.container {display: flex;
}

1. 項目（Item）：容器中的子元素被稱為項目。項目可以是任何 HTML 元素，例如文本、圖片或其他標簽。

二、彈性布局屬性

1. 容器的屬性

• flex-direction：設置項目在容器中排列的方向。可選值：row（默認），row-reverse，column，column-reverse。

.container {flex-direction: row;
}

• flex-wrap：設置項目是否換行。可選值：nowrap（默認），wrap，wrap-reverse。

.container {flex-wrap: wrap;
}

• flex-flow：flex-direction?和?flex-wrap?的簡寫屬性。

.container {flex-flow: row wrap;
}

• justify-content：設置項目在主軸上對齊的方式。可選值：flex-start（默認），flex-end，center，space-between，space-around。

.container {justify-content: center;
}

• align-items：設置項目在交叉軸上對齊的方式。可選值：flex-start，flex-end，center，baseline（默認），stretch。

.container {align-items: center;
}

• align-content：設置多行項目在交叉軸上對齊的方式。可選值：flex-start，flex-end，center，space-between，space-around，stretch（默認）。

.container {align-content: center;
}

2. 項目的屬性

• order：設置項目的排列順序。數值越小，排列越靠前，默認為 0。

.item {order: 1;
}

• flex-grow：設置項目的放大比例。默認為 0，即如果存在剩余空間，也不放大。

.item {flex-grow: 1;
}

• flex-shrink：設置項目的縮小比例。默認為 1，即如果空間不足，該項目將縮小。

.item {flex-shrink: 0;
}

• flex-basis：設置項目在主軸方向上的初始大小。可以是長度值（如?200px）或百分比（如?50%），默認值為?auto。

.item {flex-basis: 200px;
}

• flex：flex-grow，flex-shrink?和?flex-basis?的簡寫屬性。

.item {flex: 1 1 200px;
}

• align-self：允許單個項目覆蓋容器的?align-items?屬性。

.item {align-self: flex-start;
}