display:flex 是一種新布局方式,由W3C提出的,能夠以很少的樣式代碼完成以前需要很多樣式的布局,可以簡便、完整、響應式地實現各種頁面布局,兼容大部分瀏覽器,ie10開始支持,但是IE10的是-ms形式的。
display:flex有六個屬性,分別是:1.flex-direction;2.flex-wrap;3.flex-flow;4.justify-content;5.align-item;6.align-content。
第一個:flex-direction屬性:決定主軸的方向(即項目的排列方向)。有4個屬性值:
row(默認):主軸水平方向,起點在左端;row-reverse:主軸水平方向,起點在右端;column:主軸垂直方向,起點在上邊沿;column-reserve:主軸垂直方向,起點在下邊沿。
第二個:flex-wrap屬性:定義換行情況。有3個屬性值:nowrap(默認):不換行;wrap:換行,第一行在上方;wrap-reverse:換行,第一行在下方。
第三個:flex-flow屬性:flex-direction和flex-wrap的簡寫,默認row nowrap。
第四個:justify-content屬性:定義項目在主軸上的對齊方式。有多個屬性值,在這里介紹常用的幾個屬性值:flex-start(默認值):左對齊;flex-end:右對齊;center:居中;space-between:兩端對齊,項目之間間隔相等;space-around:每個項目兩側的間隔相等,即項目之間的間隔比項目與邊框的間隔大一倍。
第五個:align-items屬性:定義在交叉軸上的對齊方式。有5個屬性值:flex-start:起點對齊;flex-end:終點對齊;center:中點對齊;baseline:項目的第一行文字的基線對齊;stretch(默認值):如果項目未設置高度或設為auto,將占滿整個容器的高度。
新聞名稱:網站前端制作之displayflex布局
網站路徑:http://m.newbst.com/news19/247869.html
成都網站建設公司_創新互聯,為您提供網站設計公司、移動網站建設、做網站、自適應網站、網頁設計公司、手機網站建設
廣告
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源:
創新互聯