簡言

Flex ! 前端的毒品！後端的寶物！這東西自從面世之後就不斷的考驗網頁教學者的良心，到底要不要拋棄 float 擁抱 flex，我想這答案人人心中自有一把尺，但先碰 Flex 再碰 Float 可謂先甘後苦，這順序到底要倒吃甘蔗還是正吃甘蔗實在難說，自從有了 Flex 之後，小孩考試一百分，設計網頁不跑版，客戶網頁都RWD，老闆爽賺好開心，我也加薪加班好甘幹心，不由的說 Flex 真的是一個神物，我們只要設定父層 display: flex 以及設定次軸(cross axis)置中屬性 align-items: center 就好了（講那麼多結果重點就一行字是哪招啦），這個方式的優點是此層不需設定高度即可自動置中，且原始碼乾淨無比，真的是用一次就讓你升天啦。

原理說明

Flex 是 CSS3 版本非常重要的一個屬性了，Flex 翻成中文來說就是「彈性」或「柔性」，基本上就是跟魯夫一樣可伸可縮啦，但伸縮特性不是我們這裡要談的，這邊要談的重點會是Flex控制資料排列方向跟資料對齊的特性，Flex排版使用了行的概念，將網頁資料分成直的跟橫的，不管分成直或橫都還是用單一一個「行」的概念在看待的，在Flex中預設子層資料是橫排且不換行的，我們可以利用align-items這個屬性來設定該子層資料垂直於「行」方向的位置，簡單的說，倘若資料預設是橫排(X軸)，那麼 align-items 就是直排(Y軸)的方向，但是倘若資料是直排(Y軸)的話，那麼 align-items 控制的就是橫排(X軸)的方向，有很混亂嗎?如果很混亂沒關係，你可以先看看這一篇 Amos 第一次開始直播的影片-玩轉 CSS FLEX，裡面就把CSS Flex 完整的講了一遍，一些 Flex 很重要的一些觀念特性在裏頭也都講得非常清楚喔。講了那麼多先看影片吧，不然喉嚨說乾了也還是不懂的。

註:魯夫是日本漫畫「海賊王」中的主角，是一個橡膠人，全身皆可伸縮。

原始碼

HTML

<div class="box box7">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！
  </div>
</div>

CSS

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center; 
}
.content{
  width: 400px;
  background: #ccc;
}

實際示範頁面

Line搜尋「@csscoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
本文同步發表於 CSS可樂部落格
CSS coke的Youtube直播頻道
歡迎點擊右側訂閱 CSS coke直播頻道
若有任何問題歡迎留言討論喔
謝謝各位