如何用一行 CSS 實(shí)現(xiàn) 10 種現(xiàn)代布局
現(xiàn)代 CSS 布局使開發(fā)人員只需按幾下鍵就可以編寫十分有意義且強(qiáng)大的樣式規(guī)則般码。上面的討論和接下來的帖文研究了 10 種強(qiáng)大的 CSS 布局,它們實(shí)現(xiàn)了一些非凡的工作齿诞。
01. 超級居中:place-items: center
對于第一個(gè)“單行”布局衡便,讓我們解決所有 CSS 領(lǐng)域中最大的謎團(tuán):居中献起。我想讓您知道,使用 place-items: center 會(huì)讓此操作比您想象的容易镣陕。
首先指定 grid 作為 display 方法谴餐,然后在同一個(gè)元素上寫入 place-items: center。place-items 是同時(shí)設(shè)置 align-items 和 justify-items 的快速方法呆抑。通過將其設(shè)置為 center 岂嗓, align-items 和 justify-items 都將設(shè)置為 center。
.parent{
display:?grid;
place-items:?center;
}
這使得內(nèi)容能夠在父級內(nèi)完美居中鹊碍,而不管內(nèi)部大小厌殉。
02. 解構(gòu)煎餅式布局:flex:<grow><shrink><baseWidth>
接下來我們有解構(gòu)的煎餅!這是營銷網(wǎng)站的常見布局侈咕,例如公罕,可能有一行 3 個(gè)項(xiàng)目,通常帶有圖像耀销、標(biāo)題楼眷,然后是一些描述產(chǎn)品某些功能的文本。在移動(dòng)設(shè)備上熊尉,我們希望它們能夠很好地堆疊罐柳,并隨著我們增加屏幕尺寸而擴(kuò)展。
通過使用 Flexbox 實(shí)現(xiàn)此效果狰住,您不需要在屏幕尺寸發(fā)生變化時(shí)通過媒體查詢來調(diào)整這些元素的位置硝清。
flex 簡寫代表:flex:<flex-grow><flex-shrink><flex-basis>。
正因?yàn)槿绱俗绻胱屇目蛱畛涞剿鼈兊?lt;flex-basis>大小芦拿,縮小到更小的尺寸士飒,但不拉伸以填充任何額外的空間,請寫入:flex: 0 1?<flex-basis>蔗崎。在這種情況下酵幕,您的<flex-basis>是 150px,所以應(yīng)該是這樣:
.parent{
display:?flex;
}
.child{
flex:01150px;
}
如果您確實(shí)希望框在換到下一行時(shí)拉伸并填充空間缓苛,請將<flex-grow>設(shè)置為 1 芳撒,所以應(yīng)該是這樣:
.parent{
display:?flex;
}
.child{
flex:11150px;
}
現(xiàn)在,當(dāng)您增加或減少屏幕尺寸時(shí)未桥,這些 flex 項(xiàng)目會(huì)縮小和增長笔刹。
03. 側(cè)邊欄布局:grid-template-columns: minmax(<min>,<max>) …)
此演示對網(wǎng)格布局利用了 minmax 函數(shù)。我們在這里做的是將最小側(cè)邊欄大小設(shè)置為 150px 冬耿,但在更大的屏幕上舌菜,讓它伸展出 25% 。側(cè)邊欄將始終占據(jù)其父級水平空間的 25%亦镶,直到 25% 變得小于 150px 日月。
將以下值添加為 grid-template-columns 的值:minmax(150px, 25%) 1fr 。在第一列(在這種情況下缤骨,側(cè)邊欄)的項(xiàng)目其 minmax 為 150px(在25% )爱咬,第二列項(xiàng)目(這里指 main 部分)占據(jù)其余的空間作為單一的 1fr 軌道。
.parent{
display:?grid;
grid-template-columns:minmax(150px,25%)1fr;
}
04. 煎餅堆棧布局:grid-template-rows: auto 1fr auto
與 Deconstructed Pancake 不同绊起,當(dāng)屏幕尺寸改變時(shí)精拟,本例不會(huì)包含它的子元素。通常稱為粘性頁腳虱歪,這種布局通常用于網(wǎng)站和應(yīng)用程序蜂绎,跨多個(gè)移動(dòng)應(yīng)用程序(頁腳通常是工具欄)和網(wǎng)站(單頁應(yīng)用程序通常使用這種全局布局)。
向組件添加 display: grid 將為您提供一個(gè)單列網(wǎng)格实蔽,但是主區(qū)域的高度將僅與頁腳下方的內(nèi)容一樣高。
要使頁腳粘在底部谨读,請?zhí)砑樱?/p>
.parent{
display:?grid;
grid-template-rows:?auto1fr?auto;
}
1fr頁眉和頁腳內(nèi)容設(shè)置為自動(dòng)采用其子項(xiàng)的大小局装,并將剩余空間 ( 1fr ) 應(yīng)用于主區(qū)域,而auto調(diào)整大小的行將采用其子項(xiàng)的最小內(nèi)容的大小劳殖,以便該內(nèi)容大小增加铐尚,行本身將增長以進(jìn)行調(diào)整。
05. 經(jīng)典圣杯布局:grid-template: auto 1fr auto / auto 1fr auto
對于經(jīng)典的圣杯布局哆姻,有頁眉宣增、頁腳、左側(cè)邊欄矛缨、右側(cè)邊欄和主要內(nèi)容爹脾。類似于以前的布局帖旨,但現(xiàn)在有側(cè)邊欄!
要使用一行代碼編寫整個(gè)網(wǎng)格灵妨,請使用 grid-template 屬性解阅。這使您可以同時(shí)設(shè)置行和列。
屬性和值對為:grid-template: auto 1fr auto / auto 1fr auto 泌霍。第一個(gè)和第二個(gè)以空格分隔的列表之間的斜線是行和列之間的分隔符货抄。
.parent{
display:?grid;
grid-template:?auto1fr?auto?/?auto1fr?auto;
}
與上一個(gè)示例一樣,頁眉和頁腳具有自動(dòng)調(diào)整大小的內(nèi)容朱转,這里的左側(cè)和右側(cè)邊欄會(huì)根據(jù)其子項(xiàng)的固有大小自動(dòng)調(diào)整大小蟹地。但是,這次是水平尺寸(寬度)而不是垂直尺寸(高度)藤为。
06. 12 跨網(wǎng)格:grid-template-columns: repeat(12, 1fr)
接下來我們有另一個(gè)經(jīng)典布局:12 跨網(wǎng)格怪与。您可以使用 repeat() 函數(shù)在 CSS 中快速編寫網(wǎng)格。對網(wǎng)格模板列使用 repeat(12, 1fr); 將為每個(gè) 1fr 提供 12 列凉蜂。
.parent{
display:?grid;
grid-template-columns:repeat(12,1fr);
}
.child-span-12{
grid-column:1/13;
}
現(xiàn)在您有一個(gè) 12 列的軌道網(wǎng)格琼梆,我們可以將子項(xiàng)放在網(wǎng)格上。一種方法是使用網(wǎng)格線放置它們窿吩。例如茎杂, grid-column: 1 / 13 將跨越從第一到最后一行(第 13 行)并跨越 12 列。grid-column: 1 / 5; 將跨越前四個(gè)列纫雁。
另一種方法是使用 span 關(guān)鍵字煌往。使用 span ,您可以設(shè)置起始線轧邪,然后設(shè)置從該起點(diǎn)跨越的列數(shù)刽脖。在這種情況下,grid-column: 1 / span 12 將等效于 grid-column: 1 / 13 忌愚,而 grid-column: 2 / span 6 將等效于 grid-column: 2 / 8 曲管。
.child-span-12{
grid-column:1/?span12;
}
07. RAM (Repeat, Auto, MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr))
對于這第七個(gè)示例,結(jié)合您已經(jīng)了解的一些概念來創(chuàng)建具有自動(dòng)放置且靈活的子項(xiàng)的響應(yīng)式布局硕糊。漂亮整齊院水。這里要記住的關(guān)鍵點(diǎn)是 repeat 、 auto-(fit|fill) 和 minmax()' 简十,可以記住它們的首字母縮寫詞 RAM檬某。
總之,應(yīng)是這樣:
.parent{
display:?grid;
grid-template-columns:repeat(auto-fit,?minmax(150px,1fr));
}
您再次使用 repeat 螟蝙,但這次使用 auto-fit 關(guān)鍵字而不是顯式數(shù)值恢恼。這可以自動(dòng)放置這些子元素。這些子元素的基本最小值為 150px 胰默,最大值為 1fr 场斑,這意味著在較小的屏幕上漓踢,它們將占據(jù)整個(gè) 1fr 寬度,當(dāng)它們達(dá)到 150px 寬度時(shí)和簸,它們將開始流到同一條線上彭雾。
使用 auto-fit ,當(dāng)它們的水平尺寸超過 150px 時(shí)锁保,框?qū)⒗煲蕴畛湔麄€(gè)剩余空間薯酝。但是,如果您將其更改為 auto-fill 爽柒,則當(dāng)超出 minmax 函數(shù)中的基本大小時(shí)吴菠,它們將不會(huì)拉伸:
.parent{
display:?grid;
grid-template-columns:repeat(auto-fill,?minmax(150px,1fr));
}
08. 排列布局:justify-content: space-between
對于下一個(gè)布局,這里要主要說明的是 justify-content: space-between 浩村,它將第一個(gè)和最后一個(gè)子元素放置在其邊界框的邊緣做葵,其余空間均勻分布在元素之間。對于這些卡片心墅,它們被放置在 Flexbox 顯示模式中酿矢,使用 flex-direction: column 將方向設(shè)置為 column。
這會(huì)將標(biāo)題怎燥、描述和圖像塊放在父卡片內(nèi)的垂直列中瘫筐。然后,應(yīng)用 justify-content: space-between 將第一個(gè)(標(biāo)題)和最后一個(gè)(圖像塊)元素錨定到 flexbox 的邊緣铐姚,并且它們之間的描述性文本以相等的間距放置到每個(gè)端點(diǎn)策肝。
.parent{
display:?flex;
flex-direction:?column;
justify-content:?space-between;
}
09. 保持我的風(fēng)格:clamp(<min>,<actual>,<max>)
這里,我們介紹一些只有少數(shù)瀏覽器支持的技術(shù)隐绵,但這些技術(shù)對布局和響應(yīng)式 UI 設(shè)計(jì)有非常令人興奮的影響之众。在本演示中,您將使用固定工具設(shè)置寬度依许,如下所示:width: clamp(<min>,<actual>,<max>) 棺禾。
這將設(shè)置絕對最小和最大尺寸以及實(shí)際尺寸。有了值峭跳,應(yīng)該這樣:
.parent{
width:clamp(23ch,60%,46ch);
}
這里的最小尺寸是 23ch 或 23 個(gè)字符單元膘婶,最大尺寸是 46ch ,46 個(gè)字符坦康。字符寬度單位基于元素的字體大锌⒏丁(特別是 0 字形的寬度)诡延≈颓罚“實(shí)際”尺寸為 50%,代表此元素父寬度的 50%肆良。
在這里筛璧, clamp() 函數(shù)所做的是使該元素保持 50% 的寬度逸绎,直到 50% 大于 46ch (在較寬的視口上)或小于 23ch (在較小的視口上)。您可以看到夭谤,當(dāng)我拉伸和收縮父尺寸時(shí)棺牧,這張卡片的寬度會(huì)增加到其最大限制點(diǎn)并減小到其限制最小點(diǎn)。然后它保持在父級的中心朗儒,因?yàn)槲覀円呀?jīng)應(yīng)用了其他的屬性來將它居中颊乘。這可以實(shí)現(xiàn)更清晰的布局,因?yàn)槲谋静粫?huì)太寬(超過 46ch )或太窄(小于 23ch )醉锄。
這也是實(shí)現(xiàn)響應(yīng)式排版的好方法乏悄。例如,您可以編寫:font-size: clamp(1.5rem, 20vw, 3rem) 恳不。在這種情況下檩小,標(biāo)題的字體大小將始終保持在 1.5rem 和 3rem 之間,但會(huì)根據(jù) 20vw 實(shí)際值增大和縮小以適應(yīng)視口的寬度烟勋。
這是一種很好的技術(shù)规求,可以通過最小和最大尺寸值確保易讀性,但請記住卵惦,并非所有現(xiàn)代瀏覽器都支持它阻肿,因此請確保您有回退措施并進(jìn)行測試。
10.保持寬高比:aspect-ratio:<width>/<height>
最后要介紹的這一布局工具是最具實(shí)驗(yàn)性的工具鸵荠。它最近在 Chromium 84 中被引入 Chrome Canary冕茅,F(xiàn)irefox 正在積極努力實(shí)現(xiàn)這一點(diǎn),但目前還沒有任何穩(wěn)定的瀏覽器版本蛹找。
不過姨伤,我確實(shí)想提及這一點(diǎn),因?yàn)檫@是一個(gè)經(jīng)常遇到的問題庸疾。這只是簡單地保持圖像的寬高比乍楚。
使用 aspect-ratio 屬性,當(dāng)我調(diào)整卡片大小時(shí)届慈,綠色視覺塊保持 16 x 9 的寬高比徒溪。我們通過 aspect-ratio: 16 / 9 保持此寬高比。
.video{
aspect-ratio:16/9;
}
要在沒有此屬性的情況下保持 16 x 9 的寬高比金顿,需要使用 padding-top hack 并為其提供 56.25% 的 padding 以設(shè)置頂寬比臊泌。我們很快就會(huì)有一個(gè)屬性來避免黑客攻擊和計(jì)算百分比的需要∽岵穑可以使用 1 / 1 的比例制作正方形渠概,使用 2 / 1 制作 2:1 比例。可以設(shè)置任何圖像縮放比例播揪。
.square{
aspect-ratio:1/1;
}
雖然此功能仍在不斷完善中贮喧,但它值得了解,因?yàn)樗鉀Q了許多開發(fā)人員面臨的沖突猪狈,我自己也多次面臨箱沦,尤其是在視頻和 iframe 方面。
結(jié)論
感謝您耐心完成對這 10 種強(qiáng)大的 CSS 布局的了解雇庙。要了解更多信息谓形,請觀看完整視頻,并親自嘗試演示疆前。
完整視頻:https://www.youtube.com/watch?v=qm0IfG1GyZU
演示:https://1linelayouts.glitch.me/?
作者:懵懵懂懂學(xué)前端
https://blog.csdn.net/qq_56966124/article/details/124225189