如何用一行CSS分別實(shí)現(xiàn)10種現(xiàn)代布局？
前言
01、超級(jí)小中
grid和place-items優(yōu)雅的實(shí)現(xiàn)同時(shí)水平居中和垂直居中。<div class="box coral" contenteditable>:)div>.ex1 .parent {display: grid;place-items: center;}源碼地址：https://codepen.io/una/pen/YzyYbBx 02、可解構(gòu)的自適應(yīng)布局（The Deconstructed Pancake）
flex: 0 1 <baseWidth>這種布局經(jīng)常出現(xiàn)在電的網(wǎng)站：
在視口足夠的時(shí)候，三個(gè)框固定寬度橫放 在視口不夠的時(shí)候（寬度在移動(dòng)上面），寬度仍然固定，，但是自動(dòng)解構(gòu)（原諒我的中文水平），不在同一水平面上 .ex2 .parent {display: flex;flex-wrap: wrap;justify-content: center;}.ex2 .box {flex: 1 1 150px; /* flex-grow: 1 ，表示自動(dòng)延展到最大寬度 */flex: 0 1 150px; /* No stretching: */margin: 5px;}當(dāng)我們?cè)O(shè)置 flex: 1 1 150px;時(shí)候：源碼地址：https://codepen.io/una/pen/WNQdBza
03、經(jīng)典的側(cè)邊欄
grid-template-columns: minmax(<min>, <max>) ...同樣使用 grid布局，結(jié)合可以minmax()實(shí)現(xiàn)彈性的的這在你要適應(yīng)大屏幕的時(shí)候很有用）。minmax(就是字面意思。結(jié)合, ) 單位，非常優(yōu)雅，避免了數(shù)學(xué)計(jì)算寬度等不靈活的手段（的我們?cè)O(shè)置間隙手段時(shí)候）。Min: 150px / Max: 25%This element takes the second grid position (1fr), meaningit takes up the rest of the remaining space..ex3 .parent {display: grid;grid-template-columns: minmax(150px, 25%) 1fr;}源碼地址：https://codepen.io/una/pen/gOaNeWL
04、固定的頁(yè)眉和頁(yè)腳
grid-template-rows: auto 1fr auto固定高度的頁(yè)眉和頁(yè)腳，并保留剩余空間的主體是經(jīng)常使用的布局，我們可以利用 grid和fr單位完子實(shí)現(xiàn)。class ="blue section" contenteditable>Headerclass ="coral section" contenteditable>Main="purple section" contenteditable>Footer Content.ex4 .parent {display: grid;grid-template-rows: auto 1fr auto;}源碼地址：https://codepen.io/una/pen/bGVXPWB 05、經(jīng)典的圣杯布局（古典圣杯布局）
grid-template: auto 1fr auto / auto 1fr auto我們可以輕松地使用網(wǎng)格布局來(lái)實(shí)現(xiàn)圣杯布局，并且是彈性的。 class ="pink section">Headerclass ="section coral" contenteditable> Main Content="green section">Footer.ex5 .parent {display: grid;grid-template: auto 1fr auto / auto 1fr auto;}.ex5 header {padding: 2rem;grid-column: 1 / 4;}.ex5 .left-side {grid-column: 1 / 2;}.ex5 main {grid-column: 2 / 3;}.ex5 .right-side {grid-column: 3 / 4;}.ex5 footer {grid-column: 1 / 4;}源碼地址：https://codepen.io/una/pen/mdVbdBy
06、有意思的的疊塊
使用 grid-template-columns狀語(yǔ)從句：grid-column可以實(shí)現(xiàn)如下圖產(chǎn)品所示的布局。說(shuō)明進(jìn)一步了repeat狀語(yǔ)從句：fr的便捷性。源碼地址：https://codepen.io/una/pen/eYJOYjj
07、RAM技巧
grid-template-columns: repeat(auto-fit, minmax(, 1fr)) 這在彈性布局圖片/ box這種非常有用（行可以排放的卡片數(shù)量自動(dòng)適應(yīng)）。 .ex7 .parent {display: grid;grid-gap: 1rem;grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));}其效果是如果確保能夠滿足多個(gè)盒的最小寬度（例如上面的 150px），則自動(dòng)彈性適應(yīng)放置多行。
當(dāng)前寬度是 160px（不考慮gap），那么上面四個(gè)box的寬度會(huì)適應(yīng)為160px，并且分為4行當(dāng)前寬度是 310px（不考慮間隙），上面四個(gè)box分段兩行，兩個(gè)box平分寬度當(dāng)滿足滿足一行放下3個(gè)box時(shí)，第三個(gè)box自動(dòng)到第一行 當(dāng)滿足滿足一行放下4個(gè)box時(shí)，第四個(gè)box自動(dòng)到第一行 我們?nèi)绻麑?/span> auto-fit對(duì)劃線auto-fill：源碼地址：https://codepen.io/una/pen/oNbvNQv
08、卡片彈性適應(yīng)性
justify-content: space-between，結(jié)合grid和flex實(shí)現(xiàn)完的布局。<div class="parent white"><div class="card yellow"><h3>Title - Card 1h3><p contenteditable>Medium length description with a few more words here.p><div class="visual pink">div>div><div class="card yellow"><h3>Title - Card 2h3><p contenteditable>Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit.p><div class="visual blue">div>div><div class="card yellow"><h3>Title - Card 3h3><p contenteditable>Short Description.p><div class="visual green">div>div>div>.ex8 .parent {height: auto;display: grid;grid-gap: 1rem;grid-template-columns: repeat(3, 1fr);}.ex8 .visual {height: 100px;width: 100%;}.ex8 .card {display: flex;flex-direction: column;padding: 1rem;justify-content: space-between;}.ex8 h3 {margin: 0}無(wú)論是寬度或高度的收縮還是延展，，都可以完子的展現(xiàn)卡的布局。 地址：https://codepen.io/una/pen/ExPYomq 09、使用夾具實(shí)現(xiàn)流體印刷
clamp(<min>, <actual>, <max>)最新使用的 clamp()方法可以一行實(shí)現(xiàn)流體排版。提高UX，非常適合包含閱讀內(nèi)容的卡，因?yàn)槲覀儾幌Ｍ恍凶痔袒蛱L(zhǎng)。<div class="card purple"><h1>Title Hereh1><div class="visual yellow">div><p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.p>div></div>.ex9 .parent {display: grid;place-items: center;}.ex9 .card {width: clamp(23ch, 50%, 46ch);display: flex;flex-direction: column;padding: 1rem;}.ex9 .visual {height: 125px;width: 100%;}源碼地址：https://codepen.io/una/pen/QWyLxaL 10、完
aspect-ratio: <width> / <height>在展現(xiàn)CMS或其他設(shè)計(jì)內(nèi)容時(shí)，我們會(huì)期待圖片，視頻，卡片能夠按照固定的比例進(jìn)行布局。而最新的 aspect-ratio可以優(yōu)雅的實(shí)現(xiàn)該功能（使用chrome 84+）<div class="card blue"><h1>Video Titleh1><div class="visual green">div><p>Descriptive Text. This demo works in Chromium 84+.p>div></div>.ex10 .parent {display: grid;place-items: center;}.ex10 .visual {aspect-ratio: 16 / 9;}.ex10 .card {width: 50%;display: flex;flex-direction: column;padding: 1rem;}源碼地址：https://codepen.io/una/pen/xxZKzaX
評(píng)論
圖片
表情