石家莊app開發(fā)
無論是縱橫交錯(cuò)的郊區(qū)景觀街道，還是報(bào)紙的布局，網(wǎng)格都會(huì)帶來秩序和組織。它們還允許設(shè)計(jì)人員將網(wǎng)站布局中的元素分組。Flexbox和CSS網(wǎng)格布局在合并內(nèi)容和圖形時(shí)都很有用，但是它們的工作方式卻大不相同。我們將看一下是什么使這些布局方法與眾不同，如何在自己的Web設(shè)計(jì)中應(yīng)用它們以及如何一起使用它們。
Flexbox入門
Flexbox擅長為您提供一維布局的控制。并且，顧名思義，它允許子元素根據(jù)需要縮小和擴(kuò)展。
在flexbox開發(fā)之前，就已經(jīng)有了黑暗。設(shè)計(jì)師在使用CSS浮動(dòng)創(chuàng)建網(wǎng)格布局時(shí)費(fèi)盡心思，但不能保證他們可以在不同的屏幕尺寸上工作。然后，在這種黑暗中出現(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í)）：這是頂層或父級(jí)元素?？梢詫⑺胂蟪梢粋€(gè)容納一堆小盒子的大盒子。
flex子元素：這些是flex容器的內(nèi)容-大盒子中的小盒子。
Webflow使您可以輕松設(shè)置flex容器和flex子代的樣式。讓我們看一下flex布局UI：
一旦在Webflow中創(chuàng)建了一個(gè)容器并在其中嵌套了div塊，就可以將其顯示屬性設(shè)置為flexbox，這會(huì)將這些div塊轉(zhuǎn)換為flex子級(jí)。彈性布局設(shè)置控制子項(xiàng)的顯示方式。在選擇水平或垂直之后，您可以對(duì)齊并對(duì)齊flex子元素，控制它們?cè)谄涓溉萜髦械姆植挤绞健?nbsp;
對(duì)齊：將元素放置在橫軸上（即，您為父級(jí)設(shè)置的相反方向）。如果主軸是水平的，則交叉軸將是垂直的，反之亦然。
對(duì)齊：這是內(nèi)容在主軸上的對(duì)齊方式（即，您為父級(jí)設(shè)置的方向）。
在這里，flex容器設(shè)置為水平，對(duì)齊設(shè)置為垂直拉伸，對(duì)齊方式設(shè)置為從容器的原點(diǎn)開始。
了解這種樣式在Webflow中如何工作的最簡單方法是嘗試我們的Flexbox游戲教程。仔細(xì)閱讀本教程幾次以了解這些不同控件的工作方式是非常有幫助的。我們將看幾個(gè)例子，擾流板警報(bào)為您提供一些答案。
在這里，伸縮容器設(shè)置為水平布局。選擇中心對(duì)齊將這些圓圈推到屏幕中間。
好吧，讓我們快速看一下如何對(duì)齊垂直排列的元素。這來自flexbox教程的8級(jí)。
將flex布局設(shè)置為垂直后，我們將元素對(duì)齊到末尾（看起來像右對(duì)齊的按鈕），然后對(duì)齊間距以使它們均勻分布。這會(huì)將彩色圓圈一直放置在最右邊，并將它們均勻分布在垂直空間上。
Flexbox的本質(zhì)就是它的名字：它很靈活。它的強(qiáng)度是其彈性，拉伸或收縮（取決于可用空間）。這種適應(yīng)性的另一個(gè)重要部分是包裝flex子級(jí)的選項(xiàng)。如果沒有足夠的空間容納容器的所有子項(xiàng)，則flexbox可以將某些子項(xiàng)推到下一行。
這是我們教程中的另一個(gè)示例，顯示了包裝如何影響flex子代。如果不選擇此選項(xiàng)，則單行上會(huì)有太多元素-將子級(jí)包裹起來可以為它們提供更多空間，并有助于使布局更整潔。
Flexbox最適合簡單布局或頂部導(dǎo)航欄等較小功能。如果要?jiǎng)?chuàng)建分屏，側(cè)邊欄或英雄封面，flexbox提供了一種快速的解決方案。在我們的flexbox簡介中了解其他flexbox應(yīng)用程序。
對(duì)于需要在垂直軸和水平軸上都進(jìn)行控制的更高級(jí)的網(wǎng)格，CSS網(wǎng)格可為您提供渴望的功能。
通過有趣的方式學(xué)習(xí)flexbox ...
無需編寫任何代碼，就可以掌握28個(gè)日益具有挑戰(zhàn)性和趣味性水平的flexbox的基礎(chǔ)知識(shí)。
現(xiàn)在播放
CSS網(wǎng)格基礎(chǔ)
CSS網(wǎng)格使您可以控制網(wǎng)格模板的列和行，從而創(chuàng)建像這種復(fù)古笑臉一樣的“像素” 。
CSS網(wǎng)格比flexbox允許更復(fù)雜的布局，因?yàn)樗谒胶痛怪陛S（列和行）上組織內(nèi)容。這個(gè)微笑的表情符號(hào)在flexbox中是不可能的。像素或塊在二維中具有固定位置。沒有像使用flexbox那樣包裝元素。
乍一看，CSS網(wǎng)格布局設(shè)置非常類似于flexbox。它允許您更改對(duì)齊方式，塊的分布以及它們的顯示方式。
CSS網(wǎng)格最適合更復(fù)雜的布局。將CSS網(wǎng)格視為將多個(gè)元素錨定到頁面上的一種方法。對(duì)于具有多個(gè)需要組織的內(nèi)容和圖像塊的布局，網(wǎng)格非常實(shí)用。Flexbox不適用于這些涉及更多的布局，因?yàn)樗荒茏屇刂圃卦趩蝹€(gè)方向上的排列方式。
當(dāng)然，CSS網(wǎng)格和flexbox可以在布局中協(xié)同工作。您可以在CSS網(wǎng)格內(nèi)使用flexbox，反之亦然。
例如，您可以使用flexbox將元素（如按鈕）在特定網(wǎng)格單元內(nèi)垂直和水平居中（因?yàn)槭褂闷渌鸆SS方法居中……很棘手）。
而且，您還可以翻轉(zhuǎn)此方案，使用網(wǎng)格來控制卡中數(shù)據(jù)的放置，這些卡的布局由Flexbox更高級(jí)別地確定。這對(duì)于將flexbox的靈活性與網(wǎng)格的精確度結(jié)合起來非常方便，適用于包含大量數(shù)據(jù)的卡，例如您可能需要的房地產(chǎn)清單。
您可以在此視頻中了解有關(guān)將Flexbox和網(wǎng)格一起使用的更多信息：
注意：盡管這些布局模塊的UI有所更改，但基本概念保持不變。
要了解有關(guān)網(wǎng)格的更多信息，請(qǐng)查看我們的CSS網(wǎng)格頁面 -它具有6個(gè)免費(fèi)的可克隆網(wǎng)格布局，因此您可以自己制作！
CSS網(wǎng)格和flexbox：2種組織內(nèi)容的不同方式
剛開始設(shè)計(jì)時(shí)，F(xiàn)lexbox和CSS網(wǎng)格可能會(huì)顯得笨拙。最好的辦法是開始設(shè)計(jì)。進(jìn)行一些實(shí)驗(yàn)和一些解決問題的方法將幫助您精通兩者。
