玩轉 CSS FLEX | CSS教學 | 網頁教學 | 網頁設計

歡迎Line搜尋『@CSScoke』加入Amos公開帳號
今天來玩玩 CSS Flex的功能，與大家分享一下 Flex 的一些記憶方式跟小技巧
前面等待時間有跟大家聊了一下
若想跳過可把時間跳到3分40秒處開始喔
#網頁設計 #HTML教學 #網頁教學 #CSScoke
👍若你喜歡我的影片，歡迎利用下方任一方式斗內支持我，謝謝您
💰打賞 AMOS 喝杯咖啡
❤️街口支付901377766
❤️綠界p.ecpay.com.tw...
❤️歐付寶 tinyurl.com/am...
■□■□■□■□■□■□■□■□■□■□■□■■□■□■□■■□■□■□■□■□■□■□■□■
每周五晚上直播 / csscoke
■□■□■□■□■□■□■□■□■□■□■□■■□■□■□■■□■□■□■□■□■□■□■□■
訂閲看最新影片 goo.gl/4ZDGk9
■□■□■□■□■□■□■□■□■□■□■□■■□■□■□■■□■□■□■□■□■□■□■□■
CSS GRID / CSS格線好好玩【完整版】
• CSS GRID / CSS格線好好玩【完整...
過年連續直播用bootstrap切版五天紀錄---第一天
• 第一天：切後台畫面, 第一天狀況好多, 跟後...
過年連續直播用bootstrap切版五天紀錄---第三天
• 第三天：切前台畫面
過年連續直播用bootstrap切版五天紀錄---第四天
• 第四天：前台畫面三選一切版（粗切示範）
過年連續直播用bootstrap切版五天紀錄---第五天
• 第五天：前台畫面二選一切版（粗切示範）

[@本翔盧]

很棒的直播，相見恨晚: 16:03 排版演變歷史: table -> float -> inline-block & box -> flex & Grid 20:43 先說說 flex => 有彈性 與 Flex 其他優點 27:47 啟用 flex => 父: display : flex => 子有flex 36:12 交叉軸的對齊 39:22 flex 支援度問題 ======================================== 設定在父層 41:01 flex 實作1 : 設定三張字卡容器包覆 58:15 flex 實作1 : justify-content 靠左右/中間 1:00:00 flex 實作1 : justify-content 分散 1:01:54 flex 實作2 : 換行 (flex 不太行) 1:05:22 flex 走向 flex-direction 1:06:16 flex 不設定高度， align-content 使用 1:13:18 align-items ======================================== 設定在子層 1:19:07 flex 設定順序

[@vickeywu8970]

教得很讚!!! 而且滿幽默的 可惜沒有新影片了

[@joycechuang7933]

喜歡你的影片!有趣又實用，學到很多~~

[@CSScoke]

我也喜歡你......的回應XDDDD

[@YiHungLee]

52:00左右的顏色燈遊戲互動有趣 :)

[@李宗翰-y7s]

讚

[@rogerxue2005]

終於看完，感謝無私線上分享...

[@CSScoke]

感謝支持

[@chloelo5908]

請問一下，在1:25:22中，Amos大大沒有回-->為什麼到是用align-items去設定而不是align-content呢？

[@CSScoke]

align-items 是對單列設定，align-content 則是對多列設定，實際上當你設定了 flex 之後，瀏覽器會對該區塊計算列高空間，好讓子層做對齊用，目前只有單列的話，我們需要設定的會是次軸中的列對齊位置，而非所有子物件中的所有列，恩...講了這麼多，其實都講完了，但感覺很模糊對吧。通常這個會需要繪圖來講解會比較方便，不然就只有實做才能體會，你可以自己試著寫看看，嘗試去理解他的差異，會比較有感覺點喔。 也歡迎推薦分享給你的朋友們，幫我衝個訂閱吧^^ 感謝

[@yujochia]

已訂閱 期待下次直播

[@kanboowang1308]

Amos大，剛回頭看影片上，發現你頭上的訊息框，不知是 字太小 還是 灰底黑字 太接近？ 全螢幕看時，還是有點看不是很清楚。 眼睛小的人留...

[@henryhsu9517]

整個看完收穫很多！感謝分享！ 想請問一個CSS中關於flex設定問題，如果有flex: a b c; 是否可以寫成flex-grow: a; flex-shrink: b; flex-basis: c; ? 自行試了幾個例子似乎不一定可以，要看a b c三個數字為何，比如說flex: 0 1 auto;拆開是沒有問題，但如果flex: 50% 0 0; 改成flex-grow: 50%; flex-shrink: 0; flex-basis: 0;，畫面完全不一樣~~不知道我的理解那邊出了問題？

[@CSScoke]

flex-grow不用寫單位阿

[@yovicky1669]

老師你好在55:13 的時候有提到會講16進位碼的顏色補完，想問一下這個的影片可以在哪裡看呢?

[@老高-o6u]

剛把金魚看完 來複習一下flex 感覺很熟悉XD

[@jerryke3354]

請問Amos老師在 1:20:42 這邊我將div4-div6的區塊拿掉後無法像您的畫面一樣div1-div3會延伸次軸首端及尾端， 我將align-content: center拿掉後(不做次軸置中)畫面div1-div3就會延伸了，但教學中沒有將align-content: center 拿掉卻也有延伸效果，請問這是為什麼呢? (code如下:) .box{ width: 960px; height: 800px; border: 6px solid #f00; display: flex; justify-content: space-between; flex-direction: row-reverse; flex-wrap: wrap; align-items: stretch; align-content: center; } .item{ width: 300px; /* height: 100px; */ font-size: 16px; margin-bottom: 20px; } .item::first-letter{ font-size: 40px; } .item1{ background-color: #fa0;} .item2{ background-color: #afa;} .item3{ background-color: #aaf;} .item4{ background-color: #faa;} .item5{ background-color: #ffa;} .item6{ background-color: #6af;} 1. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam in reprehenderit expedita! Nostrum, doloremque. Odit, modi qui. Quidem enim fuga laudantium nostrum impedit, doloribus optio totam quas. Sapiente, aperiam architecto. Lorem ipsum, dolor sit amet conserepellat aspernatur corporis aut! 2. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam in reprehenderit expedita! Nostrum, doloremque. Odit, modi qui. Quirem repellat aspernatur corporis aut! 3. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam in reprehenderit expedita! Nostrum, doloremque. Odit, modi qui. Quidem ere qui, itaque officiis labore atque maiores praesentium ut doloremque delectus, eveniet veniam molestias perferendis sequi pariatur corrupti repellat aspernatur corporis aut!

[@CSScoke]

flex-wrap: wrap; 拿掉應該就可以了

[@jerryke3354]

@@CSScoke 感謝老師回覆~ 我在發問前也有嘗試將flex-wrap: wrap;拿掉，確實也會延伸。 align-content: center;是將次軸的區塊放在中間，所以拿掉會延伸(這裡理解ok，因為預設就是stretch)， 把flex-wrap: wrap;拿掉或設定flex-wrap: nowrap;是因為不換列所以會延伸嗎?(但影片中flex-wrap: 好像也是設定為wrap;卻還是會延伸) 再麻煩Amos老師解惑惹🥺🥺

[@user-on4zu7dq3x]

同問😢 照老師在影片的寫法做卻沒辦法次軸方向（垂直）延伸填滿。影片中沒有把flex-wrap: wrap; 拿掉

[@顏端黎]

老師不好意思! 1:37:00 我的顯示畫面123框跟456框沒有貼合在一起 Document .box{ width: 960px; height: 800px; border: 6px solid #f00; display: flex; justify-content: center; flex-direction: row; flex-wrap: wrap; align-items: center; } .item{ width: 300px; height: 200px; font-size: 16px; margin-bottom: 20px; } .item::first-letter{ font-size: 40px; } .item1{background-color: #fa0;} .item2{background-color: #afa; } .item3{background-color: #aaf; } .item4{background-color: #faa;} .item5{background-color: #ffa;} .item6{background-color: #6af;} 1 Lorem ipsum dolor sit augiat, rem neque sint quos aspernatur non architecto tenetur. Perspiciatis? 2 Lorem ipsum dolor sit amet coaecati saepe earume porro velit fugiat, rem neque sint quos aspernatur non architecto tenetur. Perspiciatis? 3 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Oe sint quos aspernatur non architecto tenetur. Perspiciatis? 4 5 6

[@CSScoke]

是說123的下緣沒有跟456的上緣貼齊嗎?

[@顏端黎]

@@CSScoke 對的!老師 中間有一個間距

[@CSScoke]

@@顏端黎 正常的，因為你沒有設定 align-content: center

[@CSScoke]

@@顏端黎 更多詳細的flex 相關屬性原理，建議可以看我的新書「金魚都能懂的CSS必學屬性」，裡面有很詳盡的說明 www.tenlong.com.tw/products/9789864348824?list_name=srh

[@user-on4zu7dq3x]

加了align-content: center還是會有間距，因為item有margin-bottom: 20px;

[@vic6940]

不好意思 請問57:20那邊 是按什麼鍵 才能夠取消程式碼換行?

[@CSScoke]

其實那是軟體的自動換行功能，單行文字太長導致自動換行了，我只是把文字縮小一點，他就能在同一行顯示了

[@cube322o]

想問還有沒有bootstrap的線上課程 ? 慕課都找不到....

[@2002yeunglau]

1:25:35 為什麼不是用align-content:center而是用align-item:center置中 想不通😂

[@user-on4zu7dq3x]

不懂選用原因+1，尤其是只有一橫排或一直排物件的時候。 不過我照抄老師影片的寫法，然後把align-item:center改成align-content:center，再去處理單個物件的移動（1:25:44）會發現動不了。 另外，我在開發者工具看到一個原理：align-content必須搭配flex-wrap: wrap;或flex-wrap: wrap-reverse;使用，否則無效

[@陳思吟-j4y]

.想請問一個基礎觀念，父層子層怎麼分辯? 例如影片1:05:47分的地方，.box是父層，那.item是父父層嗎? .item1是.item的子層嗎?

[@CSScoke]

@Chester Tang 謝謝協助回覆

[@high-on24]

這是 2018 年影片了，我想請問一下老師，現在 2022 舊的瀏覽器你都向下相容到第幾個版本呢?

[@CSScoke]

不管IE，其他都要相容

[@high-on24]

@@CSScoke !! 收到，感謝老師~ 不過也太有效率了吧

[@CSScoke]

@@high-on24 就剛好看到就順手回了XD

[@high-on24]

@@CSScoke 哈，謝謝老師，不過還是感嘆跟老師的頻道相見恨晚 T皿T

[@cla041054]

看你的少女時代Playlist就可以知道你有多“年輕”了

[@gammalee9562]

青蛙很好玩

[@CSScoke]

算是輕鬆學習的一個方式^^

[@克傑-r5f]

老師，請問要上你的課要在哪找

[@CSScoke]

Line 搜尋「@CSScoke」就能找到我的Line生活圈，裡面會有招生資訊

[@HA-vd5wv]

align-content 和 align-items:stretch 這兩個是不是一樣意思啊

[@CSScoke]

不一樣喔

[@jiatongwu8808]

有没有4倍速？

[@zxasqwedck]

Video Speed Controller - Google Chrome 裝完請重新啟動才會生效

[@jiatongwu8808]

老师 item如何单独设置主轴对齐方式 ？

[@CSScoke]

沒有這個屬性，你想做甚麼呢? 應該可利用margin 來達到你想要的效果....吧

[@呂先生-d5y]

請問各位前端大大，2021年來看，flex是不是已經變成了主流了?

[@CSScoke]

目前flex跟grid的確使用量變多很多，主要是ＩＥ的淘汰，但某些行業還是會用到ＩＥ，所以不管主流不主流，重點還是要看專案的性質啦

[@waynemin176]

台灣設計還要支援IE6？

[@CSScoke]

看公司的客戶而定，有些是國外客戶，不是所有客戶所在地都跟台灣一樣，在這影片錄製的當下，的確有公司是需要支援IE6的喔

[@timchen0607]

問個題外話 青蛙是什麼?

[@CSScoke]

Tim Chen 這個 flexboxfroggy.com

[@洪詩婷-s4j]

要怎麼做才能一半畫面寫CSS一半畫面預覽

[@CSScoke]

就把視窗排成我示範的那樣就可以了，左邊編輯器，右邊瀏覽器

[@洪詩婷-s4j]

CSScoke 謝謝🥺🥺🥺🥺

[@CSScoke]

加油

[@洪詩婷-s4j]

CSScoke 每天都在看鐵人賽！