固定欄：內容內容內容內容內容內容內容內容內容內容
可擴展欄：內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
資訊專欄INFORMATION COLUMN
摘要：本文由云社區發表本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下布局是如何解決布局問題。通過對比其他的實現方式，可以看出使用布局可以優雅地實現相同的布局問題。
本文由云+社區發表
本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下Flex布局是如何解決CSS布局問題。
這里同時用非flex布局和flex布局兩種方式來實現，可以對比兩種實現方式的差異。
實現方式：
父元素采用相對定位，子元素采用絕對定位，先將元素的定點定位到父元素的中心，再使用margin負值法，即子元素自身寬度、高度的一半，將其拉回到父元素的中心。
實現效果：
附上完整代碼：
垂直居中--normal
實現方式：
父元素啟用flex布局（display:flex），同時設置主軸上居中對齊（justify-content:center）、交叉軸上居中對齊（align-items:center）。子元素不需要額外設置樣式。
實現效果：同上
附上完整代碼：
垂直居中--flex
在我之前的文章圣杯布局與雙飛翼布局中詳細介紹過如何實現一個圣杯布局：
(1)中間的三欄布局，這里采用margin負值法：兩邊兩欄寬度固定，中間欄寬度自適應，左欄、右欄、中間欄向左浮動，左欄的margin-left設為-100%，中間欄的width設為100%，右欄的margin-left設為-右欄寬度。
(2)給container設置padding-left和padding-right屬性，值分別為左欄、右欄的寬度；
(3)將左右兩欄設置為相對定位，同時左欄的left值設為-左欄寬度，右欄的right設為-右欄寬度。
實現效果：
實現代碼：
圣杯布局
頭部
中間欄：內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
左欄
右欄
實現方式：
(1)holyGrail啟用flex布局，設置holyGrail中的header、container、footer在交叉軸上豎向排列（flex-direction:column;）
(2)container中的三欄布局：container啟用flex布局，設置container中的middle、left、right在主軸上橫向排列（flex-direction:row，默認值可以不設）。由于html中先寫的middle，所以為了讓left在最左邊，要設置left的order為這三欄中最小的，即-1（其他兩欄order為默認值0）
可以看出Flex布局的實現方式更加簡單，也更加直觀。
實現效果：同上
實現代碼：
圣杯布局--flex
頭部
中間欄：內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
左欄
右欄
實現效果：
實現代碼：
flex
固定欄：內容內容內容內容內容內容內容內容內容內容
可擴展欄：內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
本文主要提供了三個實例，來實際應用下flex的屬性。通過對比其他的實現方式，可以看出使用Flex布局可以優雅地實現相同的CSS布局問題。如有問題，歡迎指正。
此文已由作者授權騰訊云+社區發布
搜索關注公眾號「云加社區」，第一時間獲取技術干貨，關注后回復1024 送你一份技術課程大禮包！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1433.html
摘要：本文由云社區發表本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下布局是如何解決布局問題。通過對比其他的實現方式，可以看出使用布局可以優雅地實現相同的布局問題。 本文由云+社區發表 本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下Flex布局是如何解決CSS布局問題。 一．垂直居中 這里同時用非flex布局和flex布局兩種方式來實現，可以對比兩種實現方式...
摘要：本文由云社區發表本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下布局是如何解決布局問題。通過對比其他的實現方式，可以看出使用布局可以優雅地實現相同的布局問題。 本文由云+社區發表 本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下Flex布局是如何解決CSS布局問題。 一．垂直居中 這里同時用非flex布局和flex布局兩種方式來實現，可以對比兩種實現方式...
摘要：如果項目只有一根軸線，該屬性不起作用。后兩個屬性可選。彈性比為的子代占據父代框的空間是彈性比為的同級屬性的兩倍。其默認值為，也就是不具有彈性。此元素會根據上下文作為塊級元素或內聯元素顯示柵格模型，類似柵格模型，類似轉自屬性詳解作者 display的所有屬性 {/* CSS 1 */ display: none; display: inline; display: block; disp...
摘要：如果項目只有一根軸線，該屬性不起作用。后兩個屬性可選。彈性比為的子代占據父代框的空間是彈性比為的同級屬性的兩倍。其默認值為，也就是不具有彈性。此元素會根據上下文作為塊級元素或內聯元素顯示柵格模型，類似柵格模型，類似轉自屬性詳解作者 display的所有屬性 {/* CSS 1 */ display: none; display: inline; display: block; disp...
閱讀 3877·2021-10-08 10:05
閱讀 2962·2021-09-27 13:57
閱讀 2690·2019-08-29 11:32
閱讀 1014·2019-08-28 18:18
閱讀 1302·2019-08-28 18:05
閱讀 1993·2019-08-26 13:39
閱讀 871·2019-08-26 11:37
閱讀 2052·2019-08-26 10:37
