您好,登錄后才能下訂單哦!
小編給大家分享一下通過flex進行網(wǎng)頁布局的方法,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
flex稱為彈性布局,當父元素設置為flex值后子元素會自動成為其成員,再通過設置屬性值來實現(xiàn)各種布局效果。例通過給父元素設置justify-content屬性實現(xiàn)水平垂直居中效果
通過Flex可以簡便、完整、響應式地實現(xiàn)各種頁面布局。隨著瀏覽器的發(fā)展,目前,它已經(jīng)得到了所有瀏覽器的支持,這意味著,現(xiàn)在就能很安全地使用這項功能。接下來將和大家分享如何通過flex進行網(wǎng)頁布局
flex布局
稱為"彈性盒模型", 當父容器設置了display:flex時,子元素自動成為其成員, 容器默認存在兩根軸:水平方向的主軸和垂直的交叉軸,項目默認沿主軸排列。
flex容器(父容器)的一些屬性:
flex-direction:決定主軸的方向(即項目的排列方向)
flex-wrap:如果一條軸線排不下,如何換行
flex-flow:是flex-direction屬性和flex-wrap屬性的簡寫形式,默認值為row nowrap
justify-content:定義了項目在主軸上的對齊方式
align-items:定義項目在交叉軸上如何對齊
align-content:定義了多根軸線的對齊方式。如果項目只有一根軸線,該屬性不起作用
實例
flex實現(xiàn)水平垂直居中
* { margin: 0; padding: 0; } html { width: 100%; height: 100%; } body { display: flex; width: 100%; height: 100%; background: #eee; justify-content: center; align-items: center; } .box { width: 200px; height: 200px; background:pink; }
效果圖:
兩列等高布局:
左邊固定寬度,右邊占據(jù)剩余寬度:
<style> *{ margin: 0; padding:0; } .grid{ display: flex; border: 1px solid #ccc; } .left{ background-color:pink; flex-basis: 200px; } .right{ background-color:skyblue; flex-basis:calc(100% - 200px); } </style>
效果圖:
看完了這篇文章,相信你對通過flex進行網(wǎng)頁布局的方法有了一定的了解,想了解更多相關知識,歡迎關注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。