布局的傳統解決方案，基於盒狀模型，依賴display屬性 +position屬性 +float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。
2023年，w3c 提出了一種新的方案----flex 布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支援，這意味著，現在就能很安全地使用這項功能。
這裡由於一峰大佬寫的很好，基本上初學者學習使用 flex 布局，都看過他關於 flex 布局的文章，我就直接把他的文章引用了。
阮一峰 flex 語法篇：
這裡由於一峰大佬寫的很好，基本上初學者學習使用 flex 布局，都看過他關於 flex 布局的文章，我就直接把他的文章引用了。
阮一峰 flex 實戰篇：
這兩個是我學習 vue 之初最經常借鑑的專案框架 demo，在學習 vue 過程中很好幫助開發者提公升自己的搭建專案能力。
vue elem admin：
vue antd admin：
css flex布局實用
張歆琳 關注2016.06.17 10 50 字數 701 閱讀 1063 喜歡 15 首先弄出原始的html結構，左右側邊欄定寬220px id footer footerdiv 現在將內容容器 page 設成flex彈性盒模型 page 中間main就是個普通的div，因此寬度好像沒有自適應，很...
css flex布局基礎
1 flex 讓所有彈性盒模型物件的子元素都有相同的長度，且忽略它們內部的內容 塊級元素 藍色 紅色藍色 紅色藍色 紅色藍色 紅色 main main div 效果 2 flex basis 專案的長度。合法值 auto inherit 或乙個後跟 px em 或任何其他長度單位的數字 main1 ...
CSS Flex布局整理
注意相容問題 示例的dom結構 div class box div class item 1 div div class item 2 div div class item 3 div div 基礎樣式設計 box item1 flex direction 用於指定flex主軸的方向，繼而決定 fl...