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