1. Flexbox布局簡(jiǎn)介
Flexbox布局基礎(chǔ)入門 / 1. Flexbox布局簡(jiǎn)介

Flexbox布局基礎(chǔ)入門

手機(jī)也能上課
App下載
1/2

什么是Flexbox

Flexbox 是 flexible box 的簡(jiǎn)稱(靈活的盒子容器),是 CSS3 引入的新的布局模式。它決定了元素如何在頁(yè)面上排列,使它們能在不同的屏幕尺寸和設(shè)備下可預(yù)測(cè)地展現(xiàn)出來(lái)。

它之所以被稱為 Flexbox ,是因?yàn)樗軌?b>擴(kuò)展和收縮 flex 容器內(nèi)的元素,以最大限度地填充可用空間。與以前布局方式(如 table 布局和浮動(dòng)元素內(nèi)嵌塊元素)相比,F(xiàn)lexbox 是一個(gè)更強(qiáng)大的方式:

  • 在不同方向排列元素
  • 重新排列元素的顯示順序
  • 更改元素的對(duì)齊方式
  • 動(dòng)態(tài)地將元素裝入容器


雖然Flexbox非常適合縮放,對(duì)齊和重新排序元素。但對(duì)于部分舊版本的瀏覽器缺乏兼容性,特別對(duì)于IE內(nèi)核的瀏覽器,IE11及更低版本的瀏覽器對(duì)于Flexbox的渲染效果不是很友好,部分較低版本甚至直接不支持Flexbox。所以如果需要完全支持舊版本瀏覽器的項(xiàng)目不建議使用Flexbox。


 注意: Flexbox布局是最合適的一個(gè)應(yīng)用程序的組件,以及小規(guī)模的布局,而網(wǎng)格布局是用于較大規(guī)模的布局。


+10 經(jīng)驗(yàn) +10積分
解析
提示
參考答案
+10 經(jīng)驗(yàn) +10積分
視頻播放結(jié)束,是否學(xué)習(xí)下一節(jié)?