happy

網頁設計在網頁設計中，內容的編排和編排往往是整個設計工作的重點和難點。如果你能熟練掌握CSS的靈活佈局，無論是頁面的整體設計還是本地內容的佈局，都能事半功倍。特別是對於那些不專業或者剛剛開始從事前端開發的人來說，掌握這種佈局會讓人有一種立竿見影的感覺：網頁的佈局就是這樣。讓我們來看看CSS靈活佈局的奇妙之處。

首先，我們在荧幕上生成一個寬度為300px、高度為200px的div作為容器，它可以通過display:Flex内容聲明為塊級彈性容器

.div1{顯示：柔性；寬度：300點數；高度：200px；邊框：1px實心橙色；}

我們可以把這個容器想像成一個盒子，裡面放著三個球。讓我們看看幾種放置球的方法。首先，定義球的樣式

.ball{寬度：50px；高度：50px；邊框：1px實心#2196f3；邊框半徑：50%；顯示：靈活；對齊內容：中心；對齊項目：中心；字體大小：28px；}

把球放進容器裏

第一行框主要使用justify content内容，這可以理解為水准對齊。第二行主要使用align items内容，可以理解為垂直對齊。具體屬性值見下錶。

左上角的第一個是序號1，依此類推

柔性包裝：包裝；對齊內容：環繞空格；對齊內容：柔性開始；

通過財產彈性-換行：換行到將球的自動換行設定為框中，將水准對齊設定為空格，並將垂直對齊設定為對齊內容：Flex start。

在瞭解了柔性佈局之後，讓我們看看在實際項目中我們可以在哪裡使用柔性佈局來快速解决問題

完全居中對齊

有時我們想把文字或圖片顯示在一個網格中，使其水准和垂直對齊，也就是說，它顯示在網格的中心，彈性佈局的水准和垂直方向可以居中對齊。上例中球體中的文字就是這樣顯示的，樣式設定如下：

顯示：柔性；對齊內容：中心；對齊項目：中心；

平均分佈寬度

許多應用程序底部選單的寬度是均勻分佈的，主要使用内容彈性：1他們，1代表1。