Flexible Box(彈性盒子)能讓頁面的分布更合理和方便，
這是之前使用常規的布局方式所做不到的。

XML/HTML Code復制內容到剪貼板

<div class="warp">  
    <div class="modular">1</div>  
    <div class="modular">2</div>  
    <div class="modular">3</div>  
    <div class="modular">4</div>  
</div>  

display:flex和display:box有什么區別？

前者是flex 2012年的語法，也將是以后標準的語法，大部分瀏覽器已經實現了無前綴版本。

CSS Code復制內容到剪貼板

/*父級*/  
.warp{   
    width: 100%;   
    height: 100px;   
    /*這個是用來定義伸縮容器，是內聯還是塊取決于設置的值。*/  
    /*這個時候，他的所有子元素將變成flex文檔流，稱為伸縮項目。*/  
    /*————————————————————-*/  
    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+ */  
    /*————————————————————-*/  
    /*一起使用box-align 和 box-pack 屬性，對子元素進行居中*/  
    -webkit-box-pack:justify;   
    -webkit-box-align: ustify;   
    -moz-box-pack:justify;   
    -moz-box-align:justify;   
    box-pack:justify;