成都app開發(fā)

2022-07-29    分類： 網(wǎng)站建設(shè)

無論是縱橫交錯(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ā)是為了使使用垂直或水平一維布局更容易對齊內(nèi)容。flexbox布局中的元素可以設(shè)置其高度或?qū)挾?，以適應(yīng)不同的屏幕尺寸。 

Flexbox布局包含兩個(gè)元素： 

flex容器（或flex父級）：這是頂層或父級元素?？梢詫⑺胂蟪梢粋€(gè)容納一堆小盒子的大盒子。
flex子元素：這些是flex容器的內(nèi)容-大盒子中的小盒子。
Webflow使您可以輕松設(shè)置flex容器和flex子代的樣式。讓我們看一下flex布局UI：

一旦在Webflow中創(chuàng)建了一個(gè)容器并在其中嵌套了div塊，就可以將其顯示屬性設(shè)置為flexbox，這會(huì)將這些div塊轉(zhuǎn)換為flex子級。彈性布局設(shè)置控制子項(xiàng)的顯示方式。在選擇水平或垂直之后，您可以對齊并對齊flex子元素，控制它們在其父容器中的分布方式。 

對齊：將元素放置在橫軸上（即，您為父級設(shè)置的相反方向）。如果主軸是水平的，則交叉軸將是垂直的，反之亦然。 

對齊：這是內(nèi)容在主軸上的對齊方式（即，您為父級設(shè)置的方向）。 


在這里，flex容器設(shè)置為水平，對齊設(shè)置為垂直拉伸，對齊方式設(shè)置為從容器的原點(diǎn)開始。 

了解這種樣式在Webflow中如何工作的最簡單方法是嘗試我們的Flexbox游戲教程。仔細(xì)閱讀本教程幾次以了解這些不同控件的工作方式是非常有幫助的。我們將看幾個(gè)例子，擾流板警報(bào)為您提供一些答案。


在這里，伸縮容器設(shè)置為水平布局。選擇中心對齊將這些圓圈推到屏幕中間。

好吧，讓我們快速看一下如何對齊垂直排列的元素。這來自flexbox教程的8級。

將flex布局設(shè)置為垂直后，我們將元素對齊到末尾（看起來像右對齊的按鈕），然后對齊間距以使它們均勻分布。這會(huì)將彩色圓圈一直放置在最右邊，并將它們均勻分布在垂直空間上。

Flexbox的本質(zhì)就是它的名字：它很靈活。它的強(qiáng)度是其彈性，拉伸或收縮（取決于可用空間）。這種適應(yīng)性的另一個(gè)重要部分是包裝flex子級的選項(xiàng)。如果沒有足夠的空間容納容器的所有子項(xiàng)，則flexbox可以將某些子項(xiàng)推到下一行。 

這是我們教程中的另一個(gè)示例，顯示了包裝如何影響flex子代。如果不選擇此選項(xiàng)，則單行上會(huì)有太多元素-將子級包裹起來可以為它們提供更多空間，并有助于使布局更整潔。

Flexbox最適合簡單布局或頂部導(dǎo)航欄等較小功能。如果要?jiǎng)?chuàng)建分屏，側(cè)邊欄或英雄封面，flexbox提供了一種快速的解決方案。在我們的flexbox簡介中了解其他flexbox應(yīng)用程序。

對于需要在垂直軸和水平軸上都進(jìn)行控制的更高級的網(wǎng)格，CSS網(wǎng)格可為您提供渴望的功能。

通過有趣的方式學(xué)習(xí)flexbox ...
無需編寫任何代碼，就可以掌握28個(gè)日益具有挑戰(zhàn)性和趣味性水平的flexbox的基礎(chǔ)知識。

現(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è)微笑的表情符號在flexbox中是不可能的。像素或塊在二維中具有固定位置。沒有像使用flexbox那樣包裝元素。

乍一看，CSS網(wǎng)格布局設(shè)置非常類似于flexbox。它允許您更改對齊方式，塊的分布以及它們的顯示方式。

CSS網(wǎng)格最適合更復(fù)雜的布局。將CSS網(wǎng)格視為將多個(gè)元素錨定到頁面上的一種方法。對于具有多個(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更高級別地確定。這對于將flexbox的靈活性與網(wǎng)格的精確度結(jié)合起來非常方便，適用于包含大量數(shù)據(jù)的卡，例如您可能需要的房地產(chǎn)清單。

您可以在此視頻中了解有關(guān)將Flexbox和網(wǎng)格一起使用的更多信息：


注意：盡管這些布局模塊的UI有所更改，但基本概念保持不變。

要了解有關(guān)網(wǎ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)和一些解決問題的方法將幫助您精通兩者。

網(wǎng)頁名稱：成都app開發(fā)
瀏覽地址：http://www.bm7419.com/news/183123.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、靜態(tài)網(wǎng)站、小程序開發(fā)、動(dòng)態(tài)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

小程序開發(fā)