iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
3

簡言

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直播頻道
若有任何問題歡迎留言討論喔
謝謝各位


上一篇
使用 absolute + translate 達到CSS垂直置中的效果
下一篇
使用 Flex + :before + flex-grow 做垂直置中
系列文
連續30天的超實務網頁設計的垂直置中教學30

尚未有邦友留言

立即登入留言