Flexbox是CSS3的盒模型，這個屬性是用來做排版使用，也因為它可以靈活彈性排版的特性，也很常使用在RWD(響應式設計)上面。

當下了flex語法之後，裡面的排列方式會分成橫軸與縱軸(直軸)，概念有點像是以前國中時期所學的座標，就是X軸Y軸的概念，不過有點不一樣的是，XY軸以正向來說起始點會是在左下角，如果忘記的話我簡單畫個圖喚醒一下大家國中面對考試的痛苦(大誤)。

但是在使用flex的時候，預設的起始點則是在左上角，不過也可以使用語法做排列上的修改

他會有各種不同可以排版的方式，在使用flex之前，區塊元素預設會是由上往下排列，但是如果使用flex，預設則會變成由左到右，不過這也是可以依照需求去另外寫語法做調整的。

以下是沒有使用flex

<style>
 .container{

     margin: 10px;
     flex-wrap: wrap;
     border: 1px solid blue;
 }
 .item1{
     color:white;
     text-align:center;
     line-height: 50px;
     height:50px;
     width:50px;
     background-color:green;
 }
 .item2{
     color:white;
     text-align:center;
     line-height: 50px;
     height:50px;
     width:50px;
     background-color:yellow;
 }
 .item3{
     color:white;
     text-align:center;
     line-height: 50px;
     height:50px;
     width:50px;
     background-color:gray;
 }
 
 </style>    
<div class="container">
    <div class="item1">item1</div>
    <div class="item2">item2</div>
    <div class="item3">item3</div>
 </div>

以下是在container加上display:flex後的效果

 <style>
.container-2{
    display:flex;
    margin: 10px;
    flex-wrap: wrap;
    border: 1px solid blue;
}
.item1{
    color:white;
    text-align:center;
    line-height: 50px;
    height:50px;
    width:50px;
    background-color:green;
}
.item2{
    color:white;
    text-align:center;
    line-height: 50px;
    height:50px;
    width:50px;
    background-color:yellow;
}
.item3{
    color:white;
    text-align:center;
    line-height: 50px;
    height:50px;
    width:50px;
    background-color:gray;
}

flex可以設定一些排列方式，有分成容器(container)，以及內容物(item)，這些語法部分我們會在下一篇提到。