為什么要用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 （排序）
看不懂這一堆屬性也沒關系，來感受一下實體
<iframe height="800" style="width: 100%;" scrolling="no" title="Flexbox playground" src="https://codepen.io/enxaneta/embed/adLPwv?height=265&theme-id=light&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen Flexbox playground by Gabi (@enxaneta) on CodePen. </iframe>實踐
理解flex的核心就是區分好flex container和flex items，我們就做一個簡單的實體：
總結
flex布局很靈活，可以多種搭配，理解了flex container和flex items也就理解了flex彈性盒模型布局
參考資料
- http://css.doyoe.com/
- https://codepen.io/enxaneta/pen/adLPwv
- https://codepen.io/lostyu/pen/dyoWVEK
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/67727.html
標籤：Html/Css
上一篇：html基本介紹,了解html與css,html語法和結構
下一篇：瀏覽器中常見的html語意化標簽