網站前端製作之display flex布局 - ManBetX万博全站app網絡
400-800-9385
網站建設資訊詳細

網站前端製作之display flex布局

發表日期:2022-04-26 15:48:05   作者來源:林誌平   瀏覽:98   標簽:網站前端製作    
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,將占滿整個容器的高度。
第六個:align-content屬性:定義多根軸線的對齊方式,有6個屬性值:flex-start:與交叉軸的起點對齊;flex-end:與交叉軸的終點對齊;center:與交叉軸的中點對齊;space-between:與交叉軸的兩端對齊,軸線之間的間隔平均分布;space-around:每根軸線兩側的間隔相等,即軸線之間的間隔比軸線與邊框的間隔大一倍;stretch(默認值):軸線占滿整個交叉軸。
如沒特殊注明,文章均為ManBetX万博全站app網絡原創,轉載請注明來自https://www.engstuff.com/news/6409.html
前端相關公司評論
  • 2.駐點數據軟件工程師、前端工程師、後端工程師、雲業務專員(技術類崗位聘用人員為公司正式職工):試用期2個月,試用期工資按照轉正工資的80%發放(試用期即簽訂正式勞動合同,開始購買社會保險);...
    思茅開發網站公司
  • 為什麽說學習前端知識很有必要呢?一般情況下,ui設計師負責設計頁麵,然後和前端對接,如果ui人員不了解前端基本知識,那溝通難度就會很大。另外,ui設計師了解前端知識,也可以獨...
    遵義係統開發公司