以前撰寫的 Flex 教學文章
本篇介紹是以資訊的流向為主
只要知道 Flex 屬性中的流向對應
就算掌握了八成以上的 Flex 應用
(不唬爛,大部分 Flex 運用都是在控制方向性)
#Flex
#CSS
css flex排版 在 卡斯伯 Facebook 的最佳解答
超歡樂的 Bootstrap 4 的問與達
昨天在線上問答的時候
有同學問到一些問題
大部分能現場回答的我都回答了
有些小地方我更正一下
順便下週回饋給同學
⭐⭐ Grid 能不能不要有 gutter
昨天我回復是建議不要移除
如果有小一些的可以使用 form-row
不過後來才想起來文件其實有提到這段
課程結束後立馬去翻,恩
我真的忘了有 .no-gutters (挺)
這邊也提供第四版三種 grid gutter 給大家看看
https://codepen.io/Wcc723/pen/pWPEJG
⭐⭐ justify-content
justify-content 的屬性其實不只 BS4 的五個
其中還有一個是 space-evenly 目前支援度還沒有很完整
所以 BS 團隊還沒有加入此屬性
相關文件可以參考
https://css-tricks.com/almanac/properties/j/justify-content/
(As of our latest July 2017 update, `justify-content: space-evenly;` only works in Firefox.)
另外我自己是比較喜歡用 margin auto 推啦 (遮臉
⭐⭐ Flex 有很多人在用了嗎?
已經多到滿出來囉
隨便打開一個國外網站
檢查原始碼查看 CSS
搜尋 flex, justify-content 等常見的 flex 屬性
你會發現佔據你大多時間的網站都已經再用 Flex 囉
(Google, Facebook, Youtube 等等)
其實 Flex 還有許多排版方式
昨天我是介紹實作中最常使用到的方法
另外他的許多觀念會延伸到 CSS Grid Layout
趁著這次課程,順便記一記吧~
昨日的 Sass include Bootstrap 介紹影片
https://youtu.be/efEBKRQhNlc
css flex排版 在 卡斯伯 Facebook 的最佳解答
[直播預告] 20:30 CSS Flex
在大部分瀏覽器都支援的情況下
Flex 可以輕易完成過去難以做到的排版
如果覺得 Float 真心麻煩
不如來試試看 Flex 吧
#CSS讀書會再度出現
#可是範例都還沒做的說
#Flex
#CSS