我已經寫好宣言了 display: flex 次數比我數得多,但我仍然偶爾會忘記是否如此 justify-content 或者 align-items 它連續控制垂直軸。這不是無知;這是佈局模型的誠實現實,其行為取決於佈局模型 flex-direction. 當方向是 row, justify-content 水平工作。切換到 column 同樣的屬性現在可以垂直運作。任何聲稱自己從不打開瀏覽器開發工具來推動這些值直到盒子落到他們想要的地方的人要么躺在地上,要么擁有比我更好的記憶力。
的 Flexbox 產生器 這是我在學習這個模型時希望擁有的工具,也是當我想要在不接觸樣式表的情況下製作佈局原型時我仍然可以使用的工具。您設定容器屬性,一排樣本框即時重新流,產生您看到的內容的確切 CSS 位於下面的可複製框中。它轉動並引用;記住哪個屬性做什麼&引用;進入&引用;點擊直到看起來正確,然後讀出答案。&引用;
TL;DR: Flexbox 是一個一維佈局模型。容器驅動它通過六個屬性:
flex-direction,flex-wrap,justify-content,align-items,align-content, 和gap. 此產生器公開所有這些,顯示即時預覽,並發出乾淨的 CSS。因為預覽會使用其輸出的相同聲明進行渲染,因此您看到的正是您貼上的內容。它完全在您的瀏覽器中運行,無需註冊。
Flexbox 產生器可以解決什麼問題?
Flexbox 的強大正是因為它是相對的。您描述意圖("以相等的空間傳播這些項目,""在兩個軸上集中它")並且瀏覽器計算像素。但相對系統很難在你的腦海中保持,因為每個屬性的效果取決於其他屬性的狀態。 align-content 在物品包裝之前什麼都不做。當您改變方向時,主軸和橫軸會交換。 space-between 和 space-around 看起來相似,直到你並排比較它們。
為相關係統建立直覺的最快方法是操縱它並觀看。生成器將編輯-儲存-刷新循環折疊成單一互動:更改下拉式,查看框移動。經過十分鐘的即時預覽後,控制橫軸的屬性不再是您記住的事實,而是成為您感覺到的東西。當你完成探索時,你就不會留下需要轉錄的心理筆記;工作中的 CSS 已經為您編寫了。
容器控制哪些屬性?
Flexbox 在容器及其物品之間分配責任。容器決定整體佈置,這就是生成器的焦點,因為它是大多數佈局決策所在的位置。這是每個容器屬性的作用。
| 財產 | 它控制什麼 | 共同價值觀 |
|---|---|---|
flex-direction |
主軸及其方向 | row, column, row-reverse, column-reverse |
flex-wrap |
項目是否溢出到新行 | nowrap, wrap, wrap-reverse |
justify-content |
沿著主軸的間距 | flex-start, center, space-between, space-evenly |
align-items |
定位在橫軸上 | stretch, center, flex-start, baseline |
align-content |
橫軸上纏繞線的間距 | stretch, center, space-between |
gap |
項目之間的空間 | 例如,任何長度 16px |
製作這根棍子的心理模型是規範中的兩軸想法。物品沿著主軸流動,其中 flex-direction 集合。橫軸始終垂直於它。 justify-content 在主軸上分配空間; align-items 橫軸上的位置。一次 flex-direction 是 column,主軸是垂直的,所以 justify-content 現在將項目從上到下堆疊 align-items 將它們從左到右放置。屬性沒有任何變化;軸在它們下面旋轉。
如何使用 Flexbox 來居中 div?
這是搜尋次數最多的 Flexbox 問題,答案是三行。將容器設定為 display: flex,那麼 justify-content: center 和 align-items: center. 將子節點同時集中在主軸和橫軸上,對於預設行來說,這意味著水平和垂直的死點。
在產生器中,你選擇 center 對於對齊控制項和範例框,請跳到預覽區域的中間。然後輸出框顯示:
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
這個食譜值得透過點擊而不是記住來建立的原因是,當您的要求略有變化時,例如您希望將項目固定在頂部但水平居中,您可以更改一個下拉式並查看結果,而不是猜測哪個要編輯的兩個屬性。
對齊內容什麼時候重要?
align-content 是人們設定的屬性,然後想知道為什麼什麼都沒有發生。答案就在規格中:它只影響存在多行彈性項目時的佈局。與 flex-wrap: nowrap,每個項目都位於一條線上,因此沒有一組線可以分配,並且該屬性是惰性的。
生成器對此規則進行編碼,因此您不會被它誤導。當換行關閉時, align-content 控制被停用,並且該屬性從生成的 CSS 中完全省略。打開包裝並變得活躍,您可以看到它將成排的包裝物品推在一起或在橫軸上將它們分開。僅當它執行某些操作時才會釋放屬性以保持輸出誠實:複製規則中的每個聲明都會對您的佈局產生明顯影響。
justify-content 值有什麼差別?
的 justify-content 關鍵字是即時預覽贏得保留的地方,因為差異是空間性的,很難用散文來描述。 flex-start 在主軸的起點打包物品。 center 將它們包裝在中間。 space-between 將第一個和最後一個項目推到邊緣,並將剩餘空間平均分配給其他項目,因此外邊緣沒有空間。 space-around 為每個項目的兩側提供相等的空間,這意味著兩個項目之間的間隙是邊緣間隙的兩倍。 space-evenly 使每個間隙相等,包括邊緣。
閱讀該段落幾乎不會教你任何東西。點擊螢幕上的五個框的五個值可以在幾秒鐘內教您,您永遠不會感到困惑 space-between 與 space-around 一旦你同時看到邊緣行為。這是透過操縱而不是記憶來建立佈局的論點,也是保持一組視覺 CSS 工具關閉背後的相同論點: 梯度發生器 和 箱形陰影產生器 存在的原因相同,因為梯度和陰影也更容易用眼睛撥入而不是盲寫。組裝此類工具包的更廣泛的案例就在於這件作品 web 開發人員工具包.
Flexbox 還是 CSS 網格?
這個問題不斷出現,而將其視為競爭的框架是錯誤的。 Flexbox 是一維的:它沿著單一軸放置項目,在被告知時進行包裝,並且它擅長處理您希望瀏覽器協商大小的事物行。工具列、導覽列、按鈕組和卡行是自然的 Flexbox 工作。 CSS 網格是二維的:它將行和列控制在一起,並且它擅長在需要明確軌道的頁面級結構中。
在實際專案中,它們不斷嵌套。網格定義頁面區域,柔性容器將項目排列在其中一個區域內。徹底學習 Flexbox 不會使網格變得多餘,反之亦然;它使您能夠流利地使用適合每項工作的工具。生成器是達到一維情況流暢性的快速方法,一旦容器屬性是第二天性,手動讀取和寫入 Flex 佈局就不再需要參考。
如何使用 Flexbox 產生器?
此流程反映了您對佈局的看法。
- 選擇
flex-direction以及物品是否應該包裝。這設定了軸和溢出行為,這兩個決定取決於其他一切。 - 設定對齊方式。調整
justify-content在主軸上和align-items在橫軸上,直到預覽與您頭腦中的排列相符。 - 調音間距。設定
gap在帶有滑桿的物品之間以及打開包裝時進行設定align-content將線條間隔開。 - 複製 CSS。產生的規則目標為a
.container即時課程和更新。一鍵複製並將其貼到樣式表中。
您也可以新增或刪除預覽項目來測試佈局在不同內容下的行為。 A space-between navbar 看起來不錯,有三件商品,而有七件包裝則非常不同,並且能夠在觀看時更改計數是您在製作之前捕獲它的方式。
間隙會取代間距嗎?
大多數情況下,是的,這是一個真正的改進。之前 gap 由柔性容器支撐,間隔物品意味著為每個孩子增加利潤,然後在第一個或最後一個孩子上對抗額外的利潤,通常使用a :last-child 覆蓋或父級上的負邊距。 gap 直接設定項目之間的空間,也適用於包裝線之間,並且在外緣上不添加任何內容,因此整類邊距錯誤消失了。
產生器處理 gap 作為具有像素滑桿的一流控制,當間隙為零時它會省略聲明,因此輸出保持最小。對於生產工作, gap 目前瀏覽器很好地支援 Flex 容器,因此很少有理由返回保證金方法。如果您在工作時轉換單位之間的間距值,則 CSS 單元轉換器 處理 px 到 rem 沒有計算器的算術。
產生的 CSS 有哪些限制?
生成器產生容器規則。它不設定諸如以下的每項屬性 flex-grow, flex-shrink,或者 flex-basis,控制單一項目如何擴展和收縮以填充空間。這些是項目級決策,取決於您的特定內容,對於大多數佈局,還包括容器屬性 flex: 1 對於應該成長的項目,這就是您所需要的。當您確實需要精細的每件物品控制時,產生的容器規則仍然是正確的建構基礎。
輸出使用標準的、無前綴的屬性。對於多年失去支援的瀏覽器來說,Flexbox 的供應商前綴是必需的,因此現代樣式表不應攜帶它們,並且今天添加它們就是噪音。產生的 CSS 可以在編寫時做好生產準備,這就是重點:您留下可以貼上規則,而不是必須完成的起始草圖。對於使前端工作速度更快的更廣泛的小型實用程序,此概要 開發人員生產力工具 是一個很好的伴侶,也是如此 梯度發生器指南 如果視覺 CSS 是您想要加速的部分。
我可以用它建立哪些常見的佈局?
一些食譜涵蓋了大多數日常 Flexbox 工作,每個食譜都只需點擊生成器即可。左側有一個帶有徽標的導覽列,右側有一個連結 justify-content: space-between 與 align-items: center 在一排。一個完美居中的英雄,經典"在頁面上居中一個框,"是 justify-content: center 和 align-items: center。 表單欄位的垂直堆疊是 flex-direction: column 與a gap 為了獲得一致的間距,這比每個欄位上的邊距更乾淨。一排響應式卡片包裹在狹窄的螢幕上新的線條,就是一排 flex-wrap: wrap 和a gap,那麼 flex: 1 在卡片本身上,它們會成長以填充這一行。
在生成器中建立它們而不是從記憶體複製它們的價值在於您可以立即看到邊緣情況。 A space-between 僅包含一項的導覽列會將該項目固定到開頭,在您理解之前,該項目可能看起來像一個錯誤 space-between 單一物品沒有什麼可分發的。包裝卡行在兩張卡與六張卡上的行為不同,預覽和#39;可調節的物品數量可讓您在發貨前檢查兩者。透過操作建立佈局意味著令人驚訝的案例在您仍在工具中時浮出水面,而不是在用戶報告它們之後。
一旦食譜進入你的手指,你就不再需要它的生成器並直接寫出五行。這就是健康的最終狀態。該工具既是教師,也是生產者:您透過點擊建立的每個佈局都是您下次用手編寫時更了解的佈局,這正是良好的視覺實用程式應該逐漸使其本身不再需要基礎知識的方式,同時保持方便對於繁瑣的情況。
問號
什麼是 CSS flexbox 產生器?
CSS flexbox 產生器是一種視覺化工具,可讓您設定 flex 容器屬性並複製產生的 CSS。您調整對齊內容、對齊項目、方向、包裝和間隙、查看即時預覽,並將產生的規則貼到樣式表中。
如何使用 Flexbox 來居中 div?
將容器設定為顯示:flex,然後證明內容:居中和對齊項目:居中。將項目集中在主軸和橫軸上。在此工具中,選擇對準控制的中心並複製 CSS。
證明內容和對齊項目有什麼區別?
證明內容沿著主軸分佈項目,主軸是水平的行,垂直的列。對齊項目將項目定位在垂直於主軸的橫軸上。改變彎曲方向交換每個人控制的軸。
對齊內容什麼時候會產生效果?
對齊內容僅當項目纏繞在多條線上時才會影響佈局,因為它將這些線在橫軸上間隔開。當 Flex-wrap 設定為 nowrap 時,只有一條線,因此該屬性不執行任何操作,並且該工具將其從輸出中省略。
gap 屬性在 flexbox 中有什麼作用?
gap 在彈性項目之間設定一致的空間,而不會為每個項目添加邊距。它適用於同一行上的項目之間和纏繞行之間,並且避免了基於邊距的間距造成的邊距問題。
Flex 和 inline-flex 有什麼不同?
顯示:flex 使容器成為一個區塊級框,具有完整的可用寬度。顯示:內聯-flex 使其成為一個內聯級框,位於文字流中,寬度僅與其內容一樣,而兩者都按照相同的彈性規則排列其子級。
Flexbox 會取代 CSS 網格嗎?
No。 Flexbox 是一個一維模型,用於沿著單軸放置物品,非常適合工具列、導航和卡片行。 CSS 網格是二維的,用於行和列在一起。它們是互補的,並且經常用於相同的佈局。
產生的 CSS 在生產中使用安全嗎?
是的。每個現代瀏覽器都支援 Flexbox,並且該工具會發出標準的、無前綴的 CSS 屬性。所有處理都發生在您的瀏覽器中,因此不會上傳任何內容,並且工具在載入後會離線工作。
