Flex布局(一)

鏈接地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Flex部分均參考了阮一峰的網(wǎng)絡(luò)日志,感覺他的很多基礎(chǔ)入門知識講的非常好,總結(jié)的也很詳細。

2009年,W3C 提出了一種新的方案----Flex 布局,可以簡便、完整、響應(yīng)式地實現(xiàn)各種頁面布局。目前,它已經(jīng)得到了所有瀏覽器的支持,這意味著,現(xiàn)在就能很安全地使用這項功能。

Flex 是 Flexible Box 的縮寫,意為"彈性布局",用來為盒狀模型提供最大的靈活性。

任何一個容器都可以指定為 Flex 布局。

.box{display:flex;}

行內(nèi)元素也可以使用 Flex 布局。

.box{display:inline-flex;}

注意,設(shè)為 Flex 布局以后,子元素的float、clear和vertical-align屬性將失效。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J的外補...
    _Yfling閱讀 14,209評論 1 92
  • H5移動端知識點總結(jié) 閱讀目錄 移動開發(fā)基本知識點 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇閱讀 4,834評論 0 26
  • 移動開發(fā)基本知識點 一.使用rem作為單位 html { font-size: 100px; } @media(m...
    橫沖直撞666閱讀 3,751評論 0 6
  • 網(wǎng)頁的傳統(tǒng)布局是基于盒子模型,依賴于display+position+float的方式完成網(wǎng)頁布局,但是這樣對于垂...
    Q丁閱讀 384評論 0 0
  • 作者: 阮一峰日期: 2015年7月10日原文鏈接:http://www.ruanyifeng.com/blog/...
    Mike_Gu閱讀 1,056評論 0 6

友情鏈接更多精彩內(nèi)容