iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
自我挑戰組

前進切版之路! CSS微體驗系列 第 7

【心得】你今天青蛙了嗎? Flex之路-align-items vs. align-content 傻傻分不清楚

前言

據說在好久以前(並沒有多久!),在神器flex出現以前都要自己計算尺寸下去做排版

自從Flex出現之後,很多人都染上了毒癮,從此踏上不歸之路~

聽到就嚇到了!?這麼好用萬一忘記根本怎麼辦!?

所以我都故意不用flex下去練習、直到某天發現...

天啊我flex用的很不順手...囧

這樣怎麼行!馬上練起來

學習資源

  1. 首先推薦Amos老師的玩轉 CSS FLEX,雖然是免費的,但是品質與內容堪稱精品,看完之後對flex會有7分的了解~當然要記得不能只看不做,可以跟著老師的範例自己寫一次,最後的3分熟練要靠自己呀

  2. 看完影片之後,就可以開始玩青蛙囉~https://flexboxfroggy.com/

    免費的青蛙遊戲,裡面可以應用到flex的各種屬性,絕對是入門上手的好東西!

flex的U質學習資源與文章太多了~
基本屬性的部分我就不再多做說明
直接對我當時容易搞混、迷惑的地方做一點心得分享 :)

馬上進入今天的主題:

align-items vs. align-content 傻傻分不清楚

如果今天用的是flex-direction:row,讓物件橫排
那麼align-items/content 管的就是物件上下的位置
那...兩個管的都是上下,有什麼不同嗎?
先來看看兩個能用的屬性~

align-items

  • flex-start
  • flex-end
  • center
  • stretch

align-content

  • flex-start: 多行都集中在頂部。
  • flex-end: 多行都集中在底部。
  • flex-end:: 多行居中。
  • space-evenly: 行與行之間保持相等距離。
  • space-between: 左右貼齊邊緣
  • space-around: 每行的周圍保持相等距離。
  • stretch: 每一行都被拉伸以填滿容器。(預設)

注意到了嗎?align-contentjustify-content的文字中的 content 意思是"內容",且都能使用 space 系列!(space-evenlyspace-betweenspace-around)
喔!停下來想一想這其中的含意
那就代表...align-content是針對很多列的情況下使用


還是霧煞煞沒關係
我們來玩一下就知道了

/*父層設定*/
width: 600px;
height: 600px;
display:flex;
flex-wrap:wrap;

先來看看如果在很多列的情況下
1.先不設定align-items&align-content
2.每一個方塊不設定高
3.設定不同的 width 來看分配狀況

這個時候的高會根據列數平均分配到每一列

接下來方塊固定使用width:160px,並加入
1.方塊設定 height: 50px;
2.align-items:center;

看起來是這個樣子的

怎麼跟想像的不一樣!?不應該要全部集中在灰色父層的中央嗎??
怎麼會各自分散呢?
別急別急,flex其實還在幫每一列分配高度
手工劃分一下區域就很明顯了

每一個方塊上下的橘色區域都是相等的


align-items:flex-star;
align-items:center;
align-items:flex-end;
都設定一輪!
會發現方塊依舊維持在原本的位置上下移動

Q:如果要把這些方塊集中在一起移動要怎麼做呢?

方塊一樣固定使用width:160px,並加入
1.方塊height: 50px
2.✨align-content

如果要方塊全部都集中在一起進行上下移動,就必須要出動align-content
它可以讓多行進行整體的移動

簡單來說就是...要多行整體性移動比較適合使用align-content
如果是只操作一列的話用align-items (只有一列用align-content看不出效果)

這樣align-itemsalign-content是不是就不再傻傻分不清楚了呢!
flex好好吸~明天繼續flex研修之路!


上一篇
【踩坑】codepen沒有出現fontawesome的icon!
下一篇
【心得】你今天青蛙了嗎?flex之路-flex設定了寬卻沒有用???
系列文
前進切版之路! CSS微體驗30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言