CSS 3 display:flexとdisplay:boxの違いは何ですか?


前者はflex 2012年の構文であり、以降の標準的な構文でもあり、ほとんどのブラウザでは接頭辞なしバージョンが実現されています.
後者は2009年の文法で、もう時代遅れで、対応する接頭辞を付ける必要があります.
互換性のあるコードは、大体次のようになります.
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */