iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 4
2
自我挑戰組

30 天 CSS 隨手筆記系列 第 4

30 天 CSS 隨手筆記 - 第 04 天 - WTF... Flexbox~!! ( 3 / 3 - 實作練習 )

昨天筆記了各種 flexbox 的屬性,
今天決定用這個新的 layout mode 來練習排版,希望以後能告別 float 地獄 ヽ(✿ ゚▽゚)ノ

facebook 單一動態

目標:完成 這個動態 的切版

http://ithelp.ithome.com.tw/upload/images/20161219/20103812mVLAWYl3Hy.png

粗略的規劃中,會用到三個 flex container。如圖:
http://ithelp.ithome.com.tw/upload/images/20161219/20103812zn2dLXfqeh.png

首先,先把圖片、文字 copy 一份,並寫出大致的 html ( step 0 )
現在的版面還是裸奔的狀態。

step 1 加上貼文主體的樣式,目前還跟 flexbox 沒有關係。

接著從 header 開始著手,規劃如下:

http://ithelp.ithome.com.tw/upload/images/20161219/20103812V9eJ1bIv4R.png

  1. 整個 header 是一個 flex container
  2. 粉絲專頁連結 / 此篇貼文連結也包在一個 flex container 裡面

html 架構為:

<header class="article__header">
    <img src="圖片網址" alt="" />
    <div class="article__info">
        <a class="article__author" href="#">粉絲專頁名稱</a>
        <a class="article__time" href="#"><time>發文日期</time></a>
    </div>
</header>
/* 讓 大頭貼 跟 兩個連結 並排顯示 */
.article__header {
    display: flex;
}

/*
 * 兩個連結從上排到下,並且:
 * 1. 紛絲專頁名稱對齊大頭貼上方
 * 2. 貼文連結對其大頭貼下方
 */
.article__info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

這時候就會覺得,flexbox 好自在!! 直接設定成 space-between 真的非常方方便 =D
其他的樣式設定 ( 例如 color / margin / font / ... ) 就跳過了

經過剛剛的 step 2 後,現在 header 已經看起來有模有樣了:
http://ithelp.ithome.com.tw/upload/images/20161219/20103812lkO3ni4ST7.png

step 3 微調貼文文字樣式

再來是處理貼文中的分享連結,主要規劃是:
http://ithelp.ithome.com.tw/upload/images/20161219/20103812PIymNTTDKj.png

我這邊寫的 html 是:

<a class="main-link" href="#">
    <img src="文章縮圖" alt="縮圖">
    <div class="main-link__text">
        <h2>鐵人檔案 - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天</h2>
        <p>iT 邦幫忙是 IT 領域的技術問答與分享社群,透過 IT 人互相幫忙,一起解決每天面臨的靠北時刻。一起來當 IT 人的超級英雄吧,拯救下一個卡關的 IT…</p>
        <p class="main-link__info">ITHELP.ITHOME.COM.TW | 由 ITHOME 上傳</p>
    </div>
</a>

step 3 相同,先將 .main-link 設為 display: flex 後,就會發現...

圖片被壓縮了:
http://ithelp.ithome.com.tw/upload/images/20161219/20103812CNICTT1uVd.png

這是因為目前 .main-link 下有另一個元素 .main-link__text 內容較多,因此會吃掉一些圖片的空間。

這時候的解決方案就是在圖片上設定 "不要收縮":

.main-link {
    img {
        flex-shrink: 0;
    }
}

現在的效果就好一些了

http://ithelp.ithome.com.tw/upload/images/20161220/20103812f7nCVa4v4l.png

而連結另一側的文字,也與 header 的排版方式相似。
經過 step 4 後,分享連結的外觀是這個樣子:

http://ithelp.ithome.com.tw/upload/images/20161220/20103812nV3jLK7t8b.png

最後則是使用者操作到區塊:

http://ithelp.ithome.com.tw/upload/images/20161220/20103812g2xhAmDhRT.png

<footer class="article__footer">
    <div>
        <button><span></span>讚</button>
        <button><span></span>留言</button>
        <button><span></span>分享</button>
    </div>
    <button>
        <img src="大頭貼圖片" alt="您的大頭貼">
        <span></span>
    </button>
</footer>
.article__footer {
    display: flex;
    justify-content: space-between;
}

一樣設定 justify-content: space-between; 後,就能讓操作按鈕靠左、大頭貼靠右了。

最後的成果在:https://jsfiddle.net/lazy_shyu/ktyfLefz/9/
( icon 就沒放了,可以用 pseudo 配合 background-image 呈現出來。 )
http://ithelp.ithome.com.tw/upload/images/20161220/20103812szOOpVo1DW.png


上一篇
30 天 CSS 隨手筆記 - 第 03 天 - WTF... Flexbox~!! ( 2 / 3 - 屬性介紹 )
下一篇
30 天 CSS 隨手筆記 - 第 05 天 - OMG... Grid Layout~!! ( 1/7 - 簡介 )
系列文
30 天 CSS 隨手筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
JerryHong
iT邦新手 5 級 ‧ 2016-12-20 02:13:36

加油啊~~ 一起撐下去!!

lazy_shyu iT邦新手 5 級 ‧ 2016-12-20 13:16:49 檢舉

我會加油的~!!!! T____T

/images/emoticon/emoticon06.gif

我要留言

立即登入留言