display:flex和display:box的區別

antzone發表於2018-02-04
Flex

不少朋友在學習彈性佈局的時候會遇到兩種語法，一種是display:flex，一種是display:box。

它倆的區別在於語法的新舊:

（1）.display:box是2009年的語法版本，現在已經過時了，不推薦使用。

（2）.display:flex是2012年最新修正的語法版本，瀏覽器支援較好，也將成為以後標準的語法。

瀏覽器支援:

a:3:{s:3:\"pic\";s:43:\"portal/201704/09/105202erqxrddgdorxoqq2.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

比較完整的相容性程式碼如下:

[CSS] 純文字檢視 複製程式碼
.box {
  display:-webkit-box; 
  display:-moz-box; 
  display:-webkit-flex; 
  display:-moz-flex; 
  display:-ms-flexbox; 
  display:flex; 
}

彈性佈局可以參閱css3 Flex彈性佈局基本語法介紹一章節。

相關文章