当前位置：首页 > 科技观察

如何用一行CSS实现十个现代布局

时间：2023-03-16 22:53:39 科技观察

前言周日在家看web.dev的2020三天直播，发现了太多有趣的东西，其中有一个是关于CSS的，主持人是UnaKravets（chrome团队的一员），但是之前的基础还在（有兴趣的可以看看我一年前发的东东）关于CSS，虽然没人想看，因为看的太多了，伤心）.01.超小中型和柔性网格之前无法优雅地实现垂直居中。现在，我们可以结合我们的网格和放置项来优雅地同时实现水平居中和垂直居中。:)

.ex1.parent{display:grid;place-items:center;}来源地址：https://codepen.io/una/pen/YzyYbBx02,TheDeconstructedPancakeflex:01这种布局经常出现在电子网站上：viewport足够的时候，viewport中水平放置三个固定宽度的盒子不够的时候（宽度在mobile)，宽度还是固定的，只是自动解构了（原谅我的中文水平），不在一个层次上1

2

3

.ex2.parent{display:flex;flex-wrap:wrap;justify-content:center;}.ex2.box{flex:11150px;/*flex-grow:1,表示自动扩展到最大宽度*/flex:01150px;/*Nostretching:*/margin:5px;}当我们设置flex:11150px;时：源码地址：https://codepen.io/una/pen/WNQdBza03，经典的sidebargrid-template-columns:minmax(,)...同样使用网格布局，结合minmax()如果你想适应更大的屏幕，这很有用）。minmax(,)就是字面上的意思。结合单元，非常优雅，避免了数学计算宽度（当我们设置gapmeans）等死板手段。Min:150px/Max:25%这个元素占据第二个网格位置(1fr)，这意味着它占用剩余的空间。.ex3.parent{display:grid;grid-template-columns:minmax(150px,25%)1fr;}源码地址：https://codepen.io/una/pen/gOaNeWL04，固定页眉页脚网格-template-rows:auto1frauto固定高度的页眉和页脚，预留剩余空间的主体是经常使用的布局，我们可以使用grid和fr单位来完成实现。HeaderMainFooterContent.ex4.parent{display:grid;grid-template-rows:auto1frauto;}源码地址：https://codepen.io/una/pen/bGVXPWB05，经典圣杯布局（classicalholygraillayout）grid-template：auto1frauto/auto1frauto我们可以很容易地使用网格布局来实现圣杯布局并且具有弹性。HeaderLeftSidebarMainContentRightSidebarFooter.ex5.parent{display:grid;grid-template:auto1frauto/auto1frauto;}.ex5header{填充：2rem;网格列：1/4;}.ex5.left-side{网格列：1/2;}.ex5main{网格列：2/3;}.ex5.right-side{grid-column:3/4;}.ex5footer{grid-column:1/4;}源码地址：https://codepen.io/una/pen/mdVbdBy06，有趣的堆叠块使用grid-template-columns状语从句：grid-column可以实现下图产品所示的布局。它显示了重复状语从句的方便：fr。源码地址：https://codepen.io/una/pen/eYJOYjj07，RAM技巧grid-template-columns:repeat(auto-fit,minmax(,1fr))这个在灵活布局图片中很有用/boxes有用（自动适应一排可以布置的卡片数量）。.ex7.parent{display:grid;grid-gap:1rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));1234效果是保证那如果能满足多个框的最小宽度（比如上面的150px），它会自动灵活适应放置多行。当前宽度为160px（不考虑间距），那么上面四个框的宽度都会适配为160px，并分成4行。当前宽度为310px（不考虑空隙），上面四个盒子分两行，两个盒子平分宽度：当3个盒子放在一行时，第三个盒子会自动移到第一行.当4个盒子排成一行时，第四个盒子会自动移到第一行。如果我们设置auto-fit为auto-fill：源码地址：https://codepen.io/una/pen/oNbvNQv08，卡片弹性适配justify-content：space-between，结合grid和flex实现完整布局.

Title-Card1

Mediumlengthdescriptionwithafewmorewordshere.

Title-Card2

长说明。

Title-Card3

ShortDescription。

.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;}.ex8h3{margin:0}无论宽度或高度的收缩或延伸，都能完美展示卡片的布局。地址：https://codepen.io/una/pen/ExPYomq09，使用clamp实现流体打印clamp(,,)最新的clamp()方法可以实现一行流体排版。改进了用户体验，非常适合带有阅读内容的卡片，因为我们不希望文本行太短或太长。

TitleHere

描述性文本。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/QWyLxaL10，完整的纵横比：/为显示在设计CMS或其他内容时，我们希望图像、视频和卡片按照固定比例进行布局。而最新的aspect-ratio可以优雅的实现这个功能（使用chrome84+）

VideoTitle

DescriptiveText.ThisdemoworksinChromium84+.

.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

上一篇：抓捕成功！SilverTerrier团伙头目被尼日利亚警方控制

下一篇：在Ubuntu20.04Terminator下将默认终端更改为Terminator

如何用一行CSS实现十个现代布局相关文章

最新推荐

猜你喜欢