文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何用一行CSS分别实现十种现代布局

2024-12-14 00:19

关注

前言

周日在家看web.dev的2020三天live,发现太多有意思的东西,其中有一项是关于CSS的,主播是Una Kravets(chrome team成员)了,不过以前的底子还在(有兴趣的的可以看我一年前发布)关于CSS的东西,虽然由于太过没没啥人愿意看,sad)。

01、超级小中

在没有和flex grid之前,垂直居中一直不能很优雅的实现。而现在,可以结合我们 grid 和 place-items 优雅的实现同时 水平居中 和 垂直居中 。

  1. class="parent blue" > 
  2.   class="box coral" contenteditable> 
  3.     :) 
  4.   
 

 

  1. .ex1 .parent { 
  2.   display: grid; 
  3.   place-items: center; 

源码地址:https://codepen.io/una/pen/YzyYbBx

02、可解构的自适应布局(The Deconstructed Pancake)

flex: 0 1

这种布局经常出现在电的网站:

  1. 在视口足够的时候,三个框固定宽度横放

  2. 在视口不够的时候(宽度在移动上面),宽度仍然固定,,但是自动解构(原谅我的中文水平),不在同一水平面上

  1. class="parent white"
  2.     class="box green">1
 
  •     class="box green">2 
  •     class="box green">3 
  •    
  •  

    1. .ex2 .parent { 
    2.   display: flex; 
    3.   flex-wrap: wrap; 
    4.   justify-content: center; 
    5.  
    6. .ex2 .box { 
    7.   flex: 1 1 150px;  
    8.   flex: 0 1 150px;  
    9.   margin: 5px; 

    当我们设置 flex: 1 1 150px; 时候:

    源码 地址:https://codepen.io/una/pen/WNQdBza

    03、经典的侧边栏

    grid-template-columns: minmax(, ) ...

    同样使用 grid 布局,结合可以 minmax() 实现弹性的的这在你要适应大屏幕的时候很有用)。 minmax(, ) 就是字面意思。结合  单位,非常优雅,避免了数学计算宽度等不灵活的手段(的我们设置间隙手段时候)。

    1. class="parent"
    2.   class="section yellow" contenteditable> 
    3.   Min: 150px / Max: 25
    4.    
    5.   class="section purple" contenteditable> 
    6.     This element takes the second grid position (1fr), meaning 
    7.     it takes up the rest of the remaining space. 
    8.    
    9.  

     

    1. .ex3 .parent { 
    2.    display: grid; 
    3.    grid-template-columns: minmax(150px, 25%) 1fr; 
    4.  } 

    源码 地址:https://codepen.io/una/pen/gOaNeWL

    04、固定的页眉和页脚

    grid-template-rows: auto 1fr auto

    固定高度的页眉和页脚,并保留剩余空间的主体是经常使用的布局,我们可以利用 grid 和 fr 单位完子实现。

    1. class="parent"
    2.   class="blue section" contenteditable>Header 
    3.   class="coral section" contenteditable>Main 
    4.   class="purple section" contenteditable>Footer Content 
    5.  

     

    1. .ex4 .parent { 
    2.     display: grid; 
    3.     grid-template-rows: auto 1fr auto; 
    4.   } 

    源码 地址:https://codepen.io/una/pen/bGVXPWB

    05、经典的圣杯布局(古典圣杯布局)

    grid-template: auto 1fr auto / auto 1fr auto

    我们可以轻松地使用网格布局来实现圣杯布局,并且是弹性的。

    1. class="parent"
    2.     class="pink section">Header 
    3.     class="left-side blue section" contenteditable>Left Sidebar 
    4.     class="section coral" contenteditable> Main Content 
    5.     class="right-side yellow section" contenteditable>Right Sidebar 
    6.     class="green section">Footer 
    7.    

     

    1. .ex5 .parent { 
    2.    display: grid; 
    3.    grid-template: auto 1fr auto / auto 1fr auto; 
    4.  } 
    5.  
    6.  .ex5 header { 
    7.    padding: 2rem; 
    8.    grid-column: 1 / 4
    9.  } 
    10.  
    11.  .ex5 .left-side { 
    12.    grid-column: 1 / 2
    13.  } 
    14.  
    15.  .ex5 main { 
    16.    grid-column: 2 / 3
    17.  } 
    18.  
    19.  .ex5 .right-side { 
    20.    grid-column: 3 / 4
    21.  } 
    22.  
    23.  .ex5 footer { 
    24.    grid-column: 1 / 4
    25.  } 

    源码 地址:https://codepen.io/una/pen/mdVbdBy

    06、有意思的的叠块

    使用 grid-template-columns 状语从句: grid-column 可以实现如下图产品所示的布局。说明进一步了 repeat 状语从句: fr 的便捷性。

    源码 地址:https://codepen.io/una/pen/eYJOYjj

    07、RAM技巧

    grid-template-columns: repeat(auto-fit, minmax(, 1fr))

    这在弹性布局 图片/ box 这种非常有用(行可以排放的卡片数量自动适应)。

    1. .ex7 .parent { 
    2.    display: grid; 
    3.    grid-gap: 1rem; 
    4.    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
    5.  } 

     

    1. class="parent white"
    2.    class="box pink">1 
    3.    class="box purple">2 
    4.    class="box blue">3 
    5.    class="box green">4 
    6.   

    其效果是如果确保能够满足多个盒的最小宽度(例如上面的 150px ),则自动弹性适应放置多行。

    1. 当前宽度是 160px (不考虑gap),那么上面四个 box 的宽度会适应为 160px ,并且分为4行
    2. 当前宽度是 310px (不考虑间隙),上面四个 box 分段两行,两个 box 平分宽度
    3. 当满足满足一行放下3个box时,第三个box自动到第一行

    4. 当满足满足一行放下4个box时,第四个box自动到第一行

    我们如果将 auto-fit 对划线 auto-fill :

    源码 地址:https://codepen.io/una/pen/oNbvNQv

    08、卡片弹性适应性

    justify-content: space-between ,结合 grid 和 flex 实现完的布局。

    1. class="parent white"
    2.     class="card yellow"
    3.       

      Title - Card 1

       
    4.       Medium length description with a few more words here.

       
    5.       class="visual pink"
    6.      
    7.     class="card yellow"
    8.       

      Title - Card 2

       
    9.       Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

       
    10.       class="visual blue"
    11.      
    12.     class="card yellow"
    13.       

      Title - Card 3

       
    14.       Short Description.

       
    15.       class="visual green"
    16.      
    17.    

     

    1. .ex8 .parent { 
    2.    height: auto; 
    3.    display: grid; 
    4.    grid-gap: 1rem; 
    5.    grid-template-columns: repeat(3, 1fr); 
    6.  } 
    7.  
    8.  .ex8 .visual { 
    9.    height: 100px; 
    10.    width: 100%; 
    11.  } 
    12.  
    13.  .ex8 .card { 
    14.    display: flex; 
    15.    flex-direction: column; 
    16.    padding: 1rem; 
    17.    justify-content: space-between; 
    18.  } 
    19.  
    20.  .ex8 h3 { 
    21.    margin: 0 
    22.  } 
    
     

    无论是宽度或高度的收缩还是延展,,都可以完子的展现卡的布局。

    地址:https://codepen.io/una/pen/ExPYomq

    09、使用夹具实现流体印刷

    clamp(, , )

    最新使用的 clamp() 方法可以一行实现流体排版。提高UX,非常适合包含阅读内容的卡,因为我们不希望一行字太短或太长。

    1. class="parent white"
    2.    class="card purple"
    3.       
    4.      class="visual yellow"
    5.      

      Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.

       
    6.     
    7.   

     

    1. .ex9 .parent { 
    2.    display: grid; 
    3.    place-items: center; 
    4.  } 
    5.  
    6.  .ex9 .card { 
    7.    width: clamp(23ch, 50%, 46ch); 
    8.    display: flex; 
    9.    flex-direction: column; 
    10.    padding: 1rem; 
    11.  } 
    12.  
    13.  .ex9 .visual { 
    14.      height: 125px; 
    15.      width: 100%; 
    16.    } 

    源码 地址:https://codepen.io/una/pen/QWyLxaL

    10、完

    aspect-ratio: /

    在展现CMS或其他设计内容时,我们会期待图片,视频,卡片能够按照固定的比例进行布局。而最新的 aspect-ratio 可以优雅的实现该功能(使用chrome 84+)

    1. class="parent white"
    2.     class="card blue"
    3.        
    4.       class="visual green"
    5.       

      Descriptive Text. This demo works in Chromium 84+.

       
    6.      
    7.    

     

    1. .ex10 .parent { 
    2.    display: grid; 
    3.    place-items: center; 
    4.  } 
    5.  
    6.  .ex10 .visual { 
    7.    aspect-ratio: 16 / 9
    8.  } 
    9.  
    10.  .ex10 .card { 
    11.    width: 50%; 
    12.    display: flex; 
    13.    flex-direction: column; 
    14.    padding: 1rem; 
    15.  } 

    源码 地址:https://codepen.io/una/pen/xxZKzaX

     

    来源:三分钟学前端内容投诉

    免责声明:

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    软考中级精品资料免费领

    • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

      难度     813人已做
      查看
    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看
    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看
    • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

      难度     435人已做
      查看
    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

    AI推送时光机
    位置:首页-资讯-后端开发
    咦!没有更多了?去看看其它编程学习网 内容吧
    首页课程
    资料下载
    问答资讯