CSS Flexbox 網頁切版技巧 - Front End 網頁前端工程教學

喜歡彭彭的教學影片嗎？點擊以下連結查看更多會員專屬的教學哦： • Members-only videos
1. Flexbox 核心設定
1.1 容器：使用 flex 顯示模式
1.2 項目：決定寬度的分配方式
2. Flexbox 對齊方式
2.1 水平對齊
2.2 垂直對齊
2.3 完美置中
-------------------
更多學習資訊，請到彭彭的課程網站：
training.pada-...

[@r124io2]

最實用的一集 對新手太友善了

[@cwpeng-course]

讚讚，很高興對你有幫助 :)

[@chinchin-b2w]

謝謝老師~~~ 新版教學影片用投影片說明變得更加清楚了!!

[@cwpeng-course]

謝謝，覺得重新錄製有點價值了 :)

[@wadafeng7797]

追到第八堂啦~~謝謝老師!! 很容易就跟上進度了~~

[@cwpeng-course]

讚讚讚！希望你順利入門 :)

[@AK-di6xs]

超級感謝彭彭老師 滿滿的知識 受益無窮! html Flexbox 網頁切版 網站標題 選項 1 選項 2 選項 3 歡迎光臨 css .frame{ display: flex; /*讓下一層次的項目水平排列*/ } .left{ background-color: red; flex: none; /* 固定配置 */ width: 200px; } .right{ display: flex; background-color: #0000ff; flex: auto; /* 自動把剩下的空間填滿 */ justify-content: flex-end; } .item{ background-color: gray; flex:none; width: 100px; margin-right: 10px; text-align: center; } .welcome{ height: 300px; background-color: aqua; display: flex; justify-content: center; align-items: center; } .text{ width: 300px; height: 40px; font-size: 30px; font-weight: bold; text-align: center; }

[@cwpeng-course]

讚讚！

[@annie_hsu]

謝謝老師清楚的講解！解開了我的疑惑

[@cwpeng-course]

謝謝你的回饋，讚讚！

[@yuhantzeng]

老師講的很棒，讓我溫故而知新

[@cwpeng-course]

謝謝回饋，很高興對你有幫助 :)

[@chungmuwei]

感謝您製作這麼好的教學影片🎉 我在練習時將第一個flexbox用position: fix固定在網頁最上方當作選單，下一個flexbox就會顯示在網頁最上方，而不會顯示在選單下，請問有辦法解決這個問題嗎？謝謝🙏

[@cwpeng-course]

fixed 會讓你設定的元件浮動起來，就等於是不佔據空間，所以有這個現象是很自然的。簡單的做法可以在 body 上設定 margin-top 把那個空間用一段空白佔據掉。

[@zszz0079159x]

我感覺是指前後問題？是的話用z-index設成-1應該就解決了

[@cailinda9710]

感謝老師講得這麼淺顯易懂！ 老師想請教一個問題：如果我的container下想要控制的是兩個section，但section下面有又有很多個項目，我能直接控制兩個setion的排版嗎？

[@cwpeng-course]

謝謝你的回饋 :) 排版是一層一層做的，所以要往下控制就要再往下一層做類似的處理 ~

[@momonick0953]

講得很清楚獲益良多

[@cwpeng-course]

謝謝你的回饋，很高興對你有幫助 :)

[@欸嘿-q2h]

請問彭彭老師，在做一個專案時會建議容器內的項目都置中嗎，還是外觀上沒特別要求就不用理會

[@cwpeng-course]

通常區塊會置中，但內部若有文字的話，文字本身會靠左。

[@李白-r9h]

謝謝老師！超受用🤩

[@cwpeng-course]

讚讚，很高興對你有幫助 :)

[@飛行荷蘭人-o4w]

老師想請教一個問題 若容器內有三個項目，我只想對其中兩個項目水平靠右的話有辦法嗎 還是我只能用更多容器去把這三個項目分別放進去 謝謝您

[@cwpeng-course]

把容器切割成兩塊，左邊右邊分開，再把左邊當容器放項目進去，靠左；右邊當容器放項目進去靠右。 多做一層就是，這很正常，一般網頁都會有很多層次的。

[@colldc4207]

老師您好 影片17:00中 link我用自動產生的功能 不像您是 少了一個/，請問是可以的嗎?另外想請問不知道有沒有課程投影片可以下載呢

[@cwpeng-course]

可以的，差異不大。沒有提供投影片下載哦，不過你可以參考課程網站上的投影片 training.pada-x.com/

[@colldc4207]

@@cwpeng-course 老師您好，請問你說的這個網站，投影片在哪裡呢

[@cwpeng-course]

@@colldc4207 training.pada-x.com/javascript-start

[@洪嘉良-d3v]

想詢問老師、或了解原因的前輩們： （目前練習的程式碼與老師這邊的相同） 【問題一】 老師影片中的25:22秒處 如果我只把.right的flex:auto刪掉（也不給.right的width指定任何寬度） 為什麼Right不會自動把剩下的寬度補齊？ 但在這時如果又把Left、Right的搬到父標籤的外 Right的又可以把剩下的寬度自動補齊了？ 【問題二】 為什麼Left與Right的寬度要配合flex來指定，不能僅用width?

[@cwpeng-course]

問題一，移動到父標籤外就不在 flex 的規則下運作，那是 block 型標籤會自然張開整個寬度。 問題二，我們希望可以左右並排。

[@yipo8659]

老師 想問一個問題 為什麼在righ容器中的設定水平對齊，一定要加flex:auto呢? 因為我測試過沒加的，並沒有任何改變。 謝謝!

[@cwpeng-course]

確實沒有一定要加哦，只是加了 auto 它會自動把剩下的空間補滿。

[@kt51005]

講的精采

[@cwpeng-course]

謝謝 :)

[@tincan2465]

謝謝老師的影片! 想請問一下，使用flex填滿之後，網頁的側邊還是有一小塊縫隙，請問這要怎麼解決呢?

[@cwpeng-course]

那個是 body 標籤的 margin，你只要在 body 標籤中設定 margin:0px 就可以去掉嘍

[@r124io2]

如果 假設在這裡輸入文字 選項 1 選項 2 選項 3 且.right裡有設定 text-align:center; "假設在這裡輸入文字"

[@cwpeng-course]

空間都被後面的 item 用光了，文字只能勉強擠在剩下的空間中，就算置中也看不出差異。可以使用開發人員工具多觀察就會有心得哦 ~

[@ycl5132]

老師：我是看完您的後端教學過來的，想請問我在前端的html使用直接用瀏覽器打開可以正確套用css，但是當我在後端用app.py建立連線之後，卻會顯示"GET /main.css HTTP/1.1" 404 是為什麼呢，兩者的差異在哪裡？

[@ycl5132]

我看網路上的資訊，好像在後端程式中，css的預設路徑是放在static裡面，是跟這個有關嗎？

[@cwpeng-course]

如果使用的是 Flask 確實會預設路徑放在 static 資料夾底下沒錯，確實有可能和這個有關連性。

[@ku9522]

老師影片中的29:22秒處右邊多出的margin區域(藍色區塊)，為何不是繼承到item項目內的灰色background，而是上一層的藍色background

[@cwpeng-course]

背景色不會覆蓋 margin 的空間。

[@鈕峻奕]

老師，我想問39:17歡迎光臨的區塊，兩邊還有白白的要怎麼覆蓋掉

[@cwpeng-course]

那是 body 標籤的 border 屬性，可以寫 body{margin:0px} 就會去掉了。

[@夜无延]

老师，我想问下为啥dispaly：block不能使用完美居中呢

[@康煒棋]

還有，如果我想固定上面的區塊，當我選擇不同選項，相對應的內容就會出現在下面的區塊，要如何運用這個課程的內容呢 ? 或是左邊是選項，右邊是顯示區

[@cwpeng-course]

這樣的動作還需要把 JavaScript 的部份學好才能做得到哦 ~

[@康煒棋]

@@cwpeng-course 請問 JavaScript 與 CSS 搭配的教學會出影片嗎

[@cwpeng-course]

@@康煒棋 會哦，就這門課一路往下，不過還要再過一陣子才會到那個部份 ~

[@緑蛙-o1f]

想請問關於 .item{ } 中的程式碼，若已經設定 width:100px，是不是就不需要設定 flex:none 了 ? 因為在網頁呈現上看不出差別

[@cwpeng-course]

確實很接近，不過 flex:none 的話在容器空間不足時不會被自動縮小，如果不寫 flex:none 在容器空間不足時會自動縮小。在我們的範例中沒有被這個特性影響。

[@詹育純-d8t]

老師您好，為什麼我打layout不會出現底線呢？

[@zivhuang9591]

想請教完美置中那段講解中，text的高度是40px，文字30px，是否指令可以使文字垂直置中？

[@cwpeng-course]

不要設定 text 的高度嘍，或者設定 line-height:40px

[@user-weishen]

text-align:center , align-items:center 兩個差別在哪呀?

[@cwpeng-course]

一個是文字置中。另一個是在 Flexbox 的脈絡下將內部區塊置中。

[@milkboy164]

彭彭老師能教如何把excel放到網頁上嗎?

[@cwpeng-course]

感謝你的建議，我會考慮考慮的 :)

[@dianechen3197]

謝謝老師出的新影片關於flex的,想請問多層的flex要獨立討論,那麼黃色的display flex是要重新定義還是寫在紅色層裡,因為我無論是分開寫還是寫一起跑出來的結果都不是跟老師影片的相同,所以像請老師幫我看一下。 .frame { /* 容器 */ display:flex; justify-content:center; align-items:stretch; width:1200;height:500px; background-color:#40E0D0; } .item1{/*項目 */ flex:none; display:flex; width:400px;margin:10px;height:70px; background-color:#FFE4C4; justify-content:center; align-items:stretch; } .item2{ flex:none; justify-content:center; align-items:stretch; width:250px;margin:20px;height:250px; background-color:#FA8072; } 我希望紅色的格子是在黃色格子的下方並且置中 1 你好 Hi

[@cwpeng-course]

首先是你的 HTML 結構仔細看的話，他並沒有多層次的結構，item1、item2 都是在同一層。你得先確認好 HTML 的結構，後續的處理才會有意義。