Flexbox 基本概念總結
掌握好如何運用 Flexbox 能一定程度地簡化網頁的版面設計，使用 Flexbox 首先要宣告 display: flex，之後主要便是設定 flex-direction、flex-wrap、justify-content 及 align-items 。
看看以下例子：
HTML
<div class="container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
</div>CSS
.container {
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
height:250px;
background-color:cornflowerblue;
padding:10px;
}display: flex 宣告使用 Flexbox
flex-direction 設定Flexbox 排列的方向，常用值為：
flex-wrap 設定 Flexbox 的換行特性，常用值為：
justify-content 設定 Flexbox 排列方向軸 (main-axis) 的對齊方式，常用值為：
align-items 設定 Flexbox 排列方向相反軸 (cross-axis) 的對齊方式，常用值為：
以上介紹的都是屬於 Flexbox (container) 本身的設定，而對於 Flexbox 入面的物件 (item) 其實也有一些相關的設定可用，今版面設計更加靈活，請繼續參考 Flexbox 進階篇。