<li id="jut4n"></li>
  • 系統城裝機大師 - 唯一官網:www.ship-models.net!

    當前位置:首頁 > 網頁制作 > HTML/Xhtml > 詳細頁面

    徹底搞懂flex彈性盒模型布局

    時間:2020-02-28來源:電腦系統城作者:電腦系統城

    為什么要用flex

    基于css3簡單方便,更優雅的實現,瀏覽器兼容性好,傳統的css實現一個div居中布局要寫一堆代碼,而現在幾行代碼就搞定了,沒有理由不用flex。

    兼容性:

    Base Browsers: IE8.0+, Firefox40.0+, Chrome40.0+, iOS8.0+, Android4.4+, Opera40.0+

    flex屬性的分類

    我們先來概覽一下flex的所有屬性,屬性看似多雜,其實分為兩大類:

    flex container

    • flex-flow (復合屬性,包含以下兩個)
      • flex-direction (方向x軸,y軸)
      • flex-wrap (是否換行)
    • align-content (y軸對齊方式)
    • justify-content (x軸對齊方式)
    • align-items (flex子項在flex容器的當前行的側軸(縱軸)方向上的對齊方式。)

    flex items

    • flex (復合屬性,包含以下三個)
      • flex-grow (擴展比率)
      • flex-shrink (收縮比率)
      • flex-basis (伸縮基準值)
    • align-self (flex子項單獨在y軸對齊方式)
    • order (排序)

    看不懂這一堆屬性也沒關系,來感受一下實例

     

    實踐

    理解flex的核心就是區分好flex container和flex items,我們就做一個簡單的實例:

     

    總結

    flex布局很靈活,可以多種搭配,理解了flex container和flex items也就理解了flex彈性盒模型布局

    分享到:

    相關信息

    • HTML5之audio屬性

      audio主要支持的音頻格式:mp3 ogg wav<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>audio</title></head><body> <!-- 方法一 --> <a...

      2020-03-04

    • HTML連載72-動畫效果及其他屬性

      一、動畫效果 1.過渡與動畫相類似,都需要三要素,那么他們的區別在哪里呢? ?答:過渡必須是人為的觸發才會執行動畫,動畫不需要人為的觸發就可以自動執行?動畫。 2.?相同點: (1)過度和動畫都是用來給元素添加動畫的;(2)過渡...

      2020-03-04

    系統教程欄目

    欄目熱門教程

    人氣教程排行

    站長推薦

    熱門系統下載

    淑芬两腿间又痒了