找出您是否應(yīng)該使用CSS網(wǎng)格或flexbox為您的下一個(gè)網(wǎng)站設(shè)計(jì)，并學(xué)習(xí)如何將它們一起使用。
無(wú)論是縱橫交錯(cuò)的郊區(qū)街道景觀，還是報(bào)紙的布局，網(wǎng)格帶來(lái)秩序和組織。它們還允許網(wǎng)站設(shè)計(jì)師在網(wǎng)站設(shè)計(jì)布局中對(duì)元素進(jìn)行分組，F(xiàn)lexbox和CSS網(wǎng)格布局在整合內(nèi)容和圖形方面都很有用，但它們的工作方式非常不同。我們將看看這些布局方法的不同之處，如何將它們應(yīng)用到自己的網(wǎng)站設(shè)計(jì)中，以及如何將它們結(jié)合起來(lái)使用。
開始使用flexbox
在flexbox開發(fā)之前，是一片黑暗的，網(wǎng)站設(shè)計(jì)師們?cè)趧?chuàng)建網(wǎng)格布局的過(guò)程中一直在與CSS浮動(dòng)作斗爭(zhēng)，并不能保證他們能在不同大小的屏幕上工作。然后，從黑暗中出現(xiàn)了flexbox，一束光允許設(shè)計(jì)師創(chuàng)建網(wǎng)格狀的空間布局，并幫助進(jìn)一步發(fā)展響應(yīng)式設(shè)計(jì)。
Flexbox的開發(fā)是為了使用一維布局（垂直布局或水平布局）更容易對(duì)齊內(nèi)容。flexbox布局中的元素可以設(shè)置它們的高度或?qū)挾?，以適應(yīng)不同的屏幕大小。
flexbox布局由兩個(gè)元素組成：
flex容器（或flex父元素）：這是頂級(jí)元素或父元素。把它想象成一個(gè)大盒子，里面裝著一堆小盒子。
flex子元素：這些是flex容器的內(nèi)容—大盒子中的小盒子。
Webflow使設(shè)置flex容器和flex子元素的樣式變得很容易。讓我們來(lái)看看flex布局UI：
在Webflow中創(chuàng)建容器并在其中嵌套div塊之后，可以將其display屬性設(shè)置為flexbox，該屬性將這些div塊轉(zhuǎn)換為flex子元素。flex布局設(shè)置控制子元素的顯示方式。選擇水平或垂直后，就可以對(duì)齊和調(diào)整flex子元素，控制它們?cè)诟溉萜髦械姆植挤绞健?/p>
對(duì)齊：將元素放置在橫軸上（即，與您為父級(jí)設(shè)置的方向相反）。如果主軸是水平的，那么橫軸就是垂直的，反之亦然。
調(diào)整：這是內(nèi)容在主軸上的對(duì)齊方式（即，你為父級(jí)設(shè)定的方向）。
這里，flex容器設(shè)置為水平，對(duì)齊設(shè)置為垂直拉伸，對(duì)齊設(shè)置為從容器的原點(diǎn)開始。
理解Webflow中這種樣式如何工作的最簡(jiǎn)單方法是嘗試我們的Flexbox游戲教程，瀏覽本教程幾次對(duì)了解這些不同控件的工作原理非常有幫助。我們來(lái)看幾個(gè)例子——?jiǎng)⊥妇妗o你一些答案。
這里，flex容器被設(shè)置為水平布局，選擇居中對(duì)齊將這些圓圈推到屏幕的中間。
好的，讓我們快速看看如何對(duì)齊垂直排列的元素，這是來(lái)自flexbox教程的第8級(jí)。
將flex布局設(shè)置為垂直后，我們將元素對(duì)齊到末尾（看起來(lái)像右對(duì)齊的按鈕），然后對(duì)齊間距，使它們均勻分布。這樣就把彩色的圓圈放到了右邊，并將它們均勻地分布在垂直空間上。
Flexbox的本質(zhì)就在于它的名字：它是靈活的。它的強(qiáng)度是它的彈性，拉伸或收縮取決于可用的空間。這種適應(yīng)性的另一個(gè)重要部分是包裝flex子元素的選項(xiàng)。如果沒(méi)有足夠的空間容納容器的所有子元素，flexbox可以將一些子元素推到下一行。
下面是本教程中的另一個(gè)例子，展示了包裝如何影響flex子元素。如果不選擇這個(gè)選項(xiàng)，一行中就會(huì)有太多的元素——對(duì)子元素進(jìn)行包裝可以為它們提供更多的空間，并有助于理清布局。
Flexbox最適合簡(jiǎn)單的布局，或者像頂部導(dǎo)航欄這樣的小功能。如果您想創(chuàng)建一個(gè)分屏、側(cè)邊欄或英雄封面，flexbox提供了一個(gè)快速解決方案。在我們的flexbox簡(jiǎn)介中了解其他flexbox應(yīng)用程序。
對(duì)于更高級(jí)的網(wǎng)格，你需要控制垂直和水平軸，CSS網(wǎng)格給你你想要的力量。
CSS網(wǎng)格基礎(chǔ)
CSS grid讓你控制網(wǎng)格模板的列和行，讓你創(chuàng)建像這個(gè)復(fù)古笑臉一樣的“像素”。
CSS grid允許比f(wàn)lexbox更復(fù)雜的布局，因?yàn)樗谒胶痛怪陛S（列和行）上組織內(nèi)容。這個(gè)微笑的表情符號(hào)在flexbox中是不可能的。像素，或塊，在二維中有一個(gè)固定的位置。沒(méi)有像我們?cè)趂lexbox中看到的那樣對(duì)元素進(jìn)行包裝。
CSS網(wǎng)格布局設(shè)置乍一看很像flexbox，它允許您更改對(duì)齊方式、塊的分布以及它們的顯示方式。
CSS網(wǎng)格最適合更復(fù)雜的布局?？梢詫SS網(wǎng)格看作是在頁(yè)面上錨定多個(gè)元素的一種方法。網(wǎng)格對(duì)于包含多個(gè)需要組織的內(nèi)容和圖像塊的布局是實(shí)用的。Flexbox對(duì)于這些復(fù)雜的布局沒(méi)有那么有用，因?yàn)樗辉试S你控制元素在一個(gè)方向上的排列方式。
當(dāng)然，CSS grid和flexbox可以在一個(gè)布局中協(xié)同工作。您可以在CSS網(wǎng)格中使用flexbox，反之亦然。
例如，您可以使用flexbox在一個(gè)特定的網(wǎng)格單元格中垂直和水平地居中一個(gè)元素，比如一個(gè)按鈕（因?yàn)槭褂闷渌鸆SS方法居中比較棘手）。
你也可以翻轉(zhuǎn)這個(gè)場(chǎng)景，使用網(wǎng)格來(lái)控制數(shù)據(jù)在卡片中的位置，卡片的布局是由flexbox在更高的層次上決定的。這對(duì)于將flexbox的靈活性與包含大量數(shù)據(jù)（比如房地產(chǎn)清單）的卡的網(wǎng)格精度結(jié)合起來(lái)非常方便。
在這段視頻中，你可以了解更多關(guān)于同時(shí)使用flexbox和grid的信息：
注意：雖然這些布局模塊的UI發(fā)生了變化，但是底層概念沒(méi)有改變。
要了解更多關(guān)于網(wǎng)格的知識(shí)，請(qǐng)查看我們的CSS網(wǎng)格頁(yè)面——它提供了6個(gè)免費(fèi)的、可克隆的網(wǎng)格布局，這樣你就可以創(chuàng)建自己的網(wǎng)格布局了！
CSS grid和flexbox：兩種不同的內(nèi)容組織方式
當(dāng)你剛開始作為一個(gè)網(wǎng)站設(shè)計(jì)師的時(shí)候，F(xiàn)lexbox和CSS grid可能會(huì)覺(jué)得很笨重。最好的辦法就是開始設(shè)計(jì)。做一點(diǎn)實(shí)驗(yàn)和一些問(wèn)題的解決會(huì)幫助你掌握這兩者。
