文章详情

登录

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

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

新时代布局中一些有意思的特性！

2024-12-03 06:05

关注

在最新的 Chrome Canary 中，一个有意思的 CSS 语法 Container Queries 得到了支持。

Chrome Canary[1]：开发者专用的每日构建版，站上网络科技最前沿。当然，不一定稳定~

而在最近几个 Chrome 版本中，有一些挺有意思的属性相继得到支持，本文就将介绍一下，在今天，新时代布局中，我们能逐渐去使用的一些有意思的新特性，通过本文，你将能了解到：

flex 布局中的 gap 属性

gap 并非是新的属性，它一直存在于多栏布局 multi-column 与 grid 布局中，其中：

譬如我们有如下一个 grid 布局：

  1. "grid-container"> 
  2.     "item">1
 
  •     "item">2
    •  
  •     "item">3 
  •     "item">4 
  •     "item">5 
  •  
    •  
    1. .grid-container { 
    2.     display: grid; 
    3.     border: 5px solid; 
    4.     padding: 20px; 
    5.     grid-template-columns: 1fr 1fr 1fr; 
    6. } 
    7. .item { 
    8.     width: 100px; 
    9.     height: 100px; 
    10.     background: deeppink; 
    11.     border: 2px solid #333; 
    12. } 

    效果如下：

    grid 布局

    通过给 grid-container 添加 gap 属性，可以非常方便的设置网格行与列之间的间隙：

    1. .grid-container { 
    2.     display: grid; 
    3.     border: 5px solid; 
    4.     padding: 20px; 
    5.     grid-template-columns: 1fr 1fr 1fr; 
    6. +   gap: 5px; 
    7. } 

    而从 Chromium 84 开始，我们可以开始在 flex 布局中使用 gap 属性了!Can i use -- gap property for Flexbox[2]

    Can i use -- gap property for Flexbox

    它的作用与在 grid 布局中的类似，可以控制水平和竖直方向上 flex item 之间的间距：

    1. .flex-container { 
    2.     width: 500px; 
    3.     display: flex; 
    4.     flex-wrap: wrap; 
    5.     gap: 5px; 
    6.     justify-content: center; 
    7.     border: 2px solid #333; 
    8. } 
    9.  
    10. .item { 
    11.     width: 80px; 
    12.     height: 100px; 
    13.     background: deeppink; 
    14. } 

    gap 属性的优势在于，它避免了传统的使用 margin 的时候需要考虑第一个或者最后一个元素的左边距或者右边距的烦恼。正常而言，4 个水平的 flex item，它们就应该只有 3 个间隙。gap 只生效于两个 flex item 之间。

    控制容器宽高比属性 aspect-ratio

    保持元素容器一致的宽高比(称为长宽比)对于响应式 Web 设计和在某些布局当中至关重要。现在，通过 Chromium 88 和 Firefox 87，我们有了一种更直接的方法来控制元素的宽高比 -- aspect-ratio。Can i use -- aspect-ratio[3]

    Can i use -- aspect-ratio

    首先，我们只需要设定元素的宽，或者元素的高，再通过 aspect-ratio 属性，即可以控制元素的整体宽高：

    1. "width"> 
    2. "height"> 
    1. div { 
    2.     background: deeppink; 
    3.     aspect-ratio: 1/1; 
    4. } 
    5. .width { 
    6.     width: 100px; 
    7. } 
    8. .height { 
    9.     height: 100px; 
    10. } 

    都可以得到如下图形：

    其次，设定了 aspect-ratio 的元素，元素的高宽其中一个发生变化，另外一个会跟随变化：

    1. "container"> 
    2.     
      宽高比1:1
       
    3.     
      宽高比2:1
       
    4.     
      宽高比3:1
       
    5.  
    1. .container { 
    2.     display: flex; 
    3.     width: 30vw; 
    4.     padding: 20px; 
    5.     gap: 20px; 
    6. } 
    7. .container > div { 
    8.     flex-grow: 1; 
    9.     background: deeppink; 
    10. } 
    11. .container > div:nth-child(1) { 
    12.     aspect-ratio: 1/1; 
    13. } 
    14. .container > div:nth-child(2) { 
    15.     aspect-ratio: 2/1; 
    16. } 
    17. .container > div:nth-child(3) { 
    18.     aspect-ratio: 3/1; 
    19. } 

    当容器大小变化，每个子元素的宽度变宽，元素的高度也随着设定的 aspect-ratio 比例跟随变化：

    CodePen Demo -- aspect-ratio Demo[4]

    firefox 下的 CSS Grid 瀑布流布局(grid-template-rows: masonry)

    grid-template-rows: masonry 是 firefox 在 firefox 87 开始支持的一种基于 grid 布局快速创建瀑布流布局的方式。并且 firefox 一直在推动该属性进入标准当中。

    从 firefox 87 开始，在浏览器输入网址栏输入 about:config 并且开启 layout.css.grid-template-masonry-value.enabled 配置使用。Can i use -- grid-template-rows: masonry[5]

    正常而言，我们想要实现瀑布流布局还是需要花费一定的功夫的，即便是基于 grid 布局。在之前，我们通过 grid 布局，通过精细化控制每一个 grid item，也可以实现一些伪瀑布流布局：

    1. "g-container"> 
    2.   "g-item">1 
    3.   "g-item">2 
    4.   "g-item">3 
    5.   "g-item">4 
    6.   "g-item">5 
    7.   "g-item">6 
    8.   "g-item">7 
    9.   "g-item">8 
    10.  
    1. .g-container { 
    2.     height: 100vh; 
    3.     display: grid; 
    4.     grid-template-columns: repeat(4, 1fr); 
    5.     grid-template-rows: repeat(8, 1fr); 
    6. } 
    7.  
    8. .g-item { 
    9.     &:nth-child(1) { 
    10.         grid-column: 1; 
    11.         grid-row: 1 / 3; 
    12.     } 
    13.     &:nth-child(2) { 
    14.         grid-column: 2; 
    15.         grid-row: 1 / 4; 
    16.     } 
    17.     &:nth-child(3) { 
    18.         grid-column: 3; 
    19.         grid-row: 1 / 5; 
    20.     } 
    21.     &:nth-child(4) { 
    22.         grid-column: 4; 
    23.         grid-row: 1 / 6; 
    24.     } 
    25.     &:nth-child(5) { 
    26.         grid-column: 1; 
    27.         grid-row: 3 / 9; 
    28.     } 
    29.     &:nth-child(6) { 
    30.         grid-column: 2; 
    31.         grid-row: 4 / 9; 
    32.     } 
    33.     &:nth-child(7) { 
    34.         grid-column: 3; 
    35.         grid-row: 5 / 9; 
    36.     } 
    37.     &:nth-child(8) { 
    38.         grid-column: 4; 
    39.         grid-row: 6 / 9; 
    40.     } 
    41. } 

    效果如下：

    CSS Grid 实现伪瀑布流布局

    CodePen Demo -- CSS Grid 实现伪瀑布流布局[6]

    在上述 Demo 中，使用 grid-template-columns、grid-template-rows 分割行列，使用 grid-row 控制每个 grid item 的所占格子的大小，但是这样做的成本太高了，元素一多，计算量也非常大，并且还是在我们提前知道每个元素的高宽的前提下。

    而在有了 grid-template-rows: masonry 之后，一切都会变得简单许多，对于一个不确定每个元素高度的 4 列的 grid 布局：

    1. .container { 
    2.   display: grid; 
    3.   grid-template-columns: repeat(4, 1fr); 
    4. } 

    正常而言，看到的会是这样：

    简单的给容器加上 grid-template-rows: masonry，表示竖方向上，采用瀑布流布局：

    1. .container { 
    2.   display: grid; 
    3.   grid-template-columns: repeat(4, 1fr); 
    4. + grid-template-rows: masonry; 
    5. } 

    便可以轻松的得到这样一种瀑布流布局：

    如果你在使用 firefox，并且开启了 layout.css.grid-template-masonry-value.enabled 配置，可以戳进下面的 DEMO 感受一下：

    CodePen Demo -- grid-template-rows: masonry 实现瀑布流布局[7]

    当然，这是一个最简单的 DEMO，关于更多 grid-template-rows: masonry 相关知识，你可以详细的看看这篇文章：Native CSS Masonry Layout In CSS Grid[8]

    CSS 容器查询(Container Queries)

    什么是 CSS 容器查询[9](Container Queries)?

    在之前，对于同个样式，我们如果希望根据视口大小得到不一样效果，通常使用的是媒体查询。

    但是，一些容器或者组件的设计可能并不总是与视口的大小有关，而是与组件在布局中的放置位置有关。

    所以在未来，新增了一种方式可以对不同状态下的容器样式进行控制，也就是容器查询。在最新的 Chrome Canary[10] 中，我们可以通过 chrome://flags/#enable-container-queries 开启 Container Queries 功能。

    假设我们有如下结构：

    1. "wrap"> 
    2.     "g-container"> 
    3.         "child">Title 
    4.         
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus vel eligendi, esse illum similique sint!!
       
    5.      
    6.  

    正常情况下的样式如下：

    1. .g-container { 
    2.     display: flex; 
    3.     flex-wrap: nowrap; 
    4.     border: 2px solid #ddd; 
    5.  
    6.     .child { 
    7.         flex-shrink: 0; 
    8.         width: 200px; 
    9.         height: 100px; 
    10.         background: deeppink; 
    11.     } 
    12.      
    13.     p { 
    14.         height: 100px; 
    15.         font-size: 16px; 
    16.     } 
    17. } 

    结构如下：

    在未来，我们可以通过 @container query 语法，设定父容器 .wrap 在不同宽度下的不同表现，在上述代码基础上，新增下述代码：

    1. .wrap { 
    2.     contain: layout inline-size; 
    3.     resize: horizontal; 
    4.     overflow: auto; 
    5. } 
    6. .g-container { 
    7.     display: flex; 
    8.     flex-wrap: nowrap; 
    9.     border: 2px solid #ddd; 
    10.     .child { 
    11.         flex-shrink: 0; 
    12.         width: 200px; 
    13.         height: 100px; 
    14.         background: deeppink; 
    15.     } 
    16.     p { 
    17.         height: 100px; 
    18.         font-size: 16px; 
    19.     } 
    20. } 
    21. // 当 .wrap 宽度小于等于 400px 时下述代码生效  
    22. @container (max-width: 400px) { 
    23.     .g-container { 
    24.         flex-wrap: wrap; 
    25.         flex-direction: column; 
    26.     } 
    27.     .g-container .child { 
    28.         width: 100%; 
    29.     } 
    30. } 

    注意这里要开启 @container query，需要配合容器的 contain 属性，这里设置了 contain: layout inline-size，当 .wrap 宽度小于等于 400px 时，@container (max-width: 400px) 内的代码则生效，从横向布局 flex-wrap: nowrap 变换成了纵向换行布局 flex-wrap: wrap：

     

    如果你的浏览器已经开启了 chrome://flags/#enable-container-queries，你可以戳这个代码感受一下：

    CodePen Demo -- CSS @container query Demo[11]

    媒体查询与容器查询的异同，通过一张简单的图看看，核心的点在于容器的宽度发生变化时，视口的宽度不一定会发生变化：

    这里仅仅是介绍了 @container query 的冰山一角，更多内容你可以戳这里了解更多：say-hello-to-css-container-queries[12]

    最后

    好了，本文到此结束，希望对你有帮助 :)

    更多精彩 CSS 技术文章汇总在我的 Github -- iCSS[13] .

    参考资料

     

    来源：iCSS前端趣闻内容投诉

    免责声明：

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

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

    软考中级精品资料免费领

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

      难度     813人已做
      查看

    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看

    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看

    • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

      难度     435人已做
      查看

    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

    AI推送时光机

    新时代布局中一些有意思的特性！

    后端开发CSS2024-12-03

    web开发中新时代布局的特性有哪些

    后端开发2024-04-02

    Chrome 95有哪些有意思的新特性？

    后端开发Chrome952024-12-02

    HTML5中一些酷炫又有趣的新特性代码整理汇总

    后端开发2023-02-25
    位置：首页-资讯-后端开发
    咦！没有更多了？去看看其它编程学习网 内容吧
    首页课程
    资料下载    问答资讯