<optgroup id="srizi"></optgroup>

<optgroup id="srizi"></optgroup>

系統城裝機大師 - 唯一官網:www.jasafloorhardener.com!

當前位置:首頁 > 網頁制作 > 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

系統教程欄目

欄目熱門教程

人氣教程排行

站長推薦

熱門系統下載

久久大香久久久尹人尹人