css彈性盒子屬性

CSS彈性盒子屬性（CSS flexbox 屬性）是一種用于排列和對齊內容的最先進的CSS布局模型。CSS彈性盒子模型可以輕松地實現自適應布局，而不需要過多的代碼。在本文中，我們將談論一些最常用的CSS彈性盒子屬性。

flex-direction屬性

flex-direction屬性定義了在彈性盒子內部應該如何對齊和布局子元素。默認情況下，該屬性設置為“row”，也就是水平排列子元素。還可以使用其他值，如“column”，來垂直排列子元素。

.container {
display: flex;
flex-direction: row;
}

flex-wrap屬性定義了彈性盒子的子元素應該如何換行。默認情況下，該屬性設置為“nowrap”，這意味著所有子元素將放在同一行上，而不進行任何換行。如果您希望子元素在超出容器大小時自動換行，則可以將該屬性設置為“wrap”。

.container {
display: flex;
flex-wrap: wrap;
}

justify-content屬性定義了彈性盒子中的主軸上子元素的對齊方式。例如，如果將該屬性設置為“center”，則子元素將水平居中對齊。還可以使用其他值，如“flex-start”、“flex-end”、“space-between”、“space-around”來實現更多樣化的對齊方式。

.container {
display: flex;
justify-content: center;
}

align-items屬性定義了在彈性盒子中，沿著與主軸垂直的交叉軸上如何對齊子元素。例如，可以使用該屬性來垂直居中子元素。

.container {
display: flex;
align-items: center;
}

align-content屬性定義了多個行或列的子元素如何在彈性盒子中垂直對齊。

.container {
display: flex;
flex-wrap: wrap;
align-content: center;
}

總結來說，CSS彈性盒子屬性讓布局變得更加靈活自適應，并且可以用更少的代碼實現復雜的布局結構。如果您想更加深入地研究CSS彈性盒子屬性，建議您查閱W3C的CSS Flexbox文檔。