Flex是一種用于布局和排列HTML元素的CSS屬性。它涵蓋了許多有用的功能來(lái)實(shí)現(xiàn)簡(jiǎn)單和復(fù)雜的布局需求，這篇文章將重點(diǎn)介紹Flex CSS的寫法和使用。

.container{
display:flex;
justify-content:center; //水平居中
align-items:center; //垂直居中
}

上面的代碼顯示了一個(gè).flex-container的樣式，用于包含HTML元素。使用"Display"屬性的值"flex"，告訴瀏覽器這個(gè)容器采用Flex布局。接下來(lái)使用"justify-content"和"align-items"屬性設(shè)置水平和垂直居中。

.container{
display:flex;
flex-wrap:wrap; //換行
justify-content:flex-start; //左對(duì)齊
}

在這個(gè)例子中，我們?cè)O(shè)置Flex容器允許Flex項(xiàng)目在多個(gè)行上排列，而不是在單個(gè)行中排列。使用"flex-wrap"屬性，我們將其值設(shè)置為"wrap"。接下來(lái)，我們使用"justify-content"屬性，將其值設(shè)置為"flex-start"，以將Flex項(xiàng)目左對(duì)齊。

.container{
display:flex;
flex-direction:column; //垂直排列
justify-content:space-between; //平均分布
align-items:center; //垂直居中
}

在這個(gè)例子中，我們?cè)O(shè)置Flex容器的方向?yàn)?column"，這意味著Flex項(xiàng)目垂直排列。然后，我們使用"justify-content"屬性，將其值設(shè)置為"space-between"，以使項(xiàng)目之間平均分布。最后，我們使用"align-items"屬性，將其值設(shè)置為"center"，以使項(xiàng)目在垂直方向上居中。

總之，通過(guò)使用Flex CSS的寫法和屬性，我們可以輕松地控制和布置HTML元素。Flex CSS是一個(gè)非常強(qiáng)大的工具，可以用于創(chuàng)建響應(yīng)式，移動(dòng)友好的布局，這些布局可以自適應(yīng)不同屏幕尺寸和設(shè)備。