看完了 2021 CSS 年度报告，我学到了啥？

大家好，我是 ConardLi，一年一度的 CSS年度报告 如期而至，我挑了一些我感兴趣的部分，和我一起来看看吧～

这篇文章用了很久，因为平时 CSS 写的实在少，其实看报告的主要目的除了了解CSS技术趋势，更重要的是顺便学习了下之前没用过的一些特性和库

布局

弹性盒子（Flex）布局

相信大多数人都用过，就不多说了。

CSS 网格（GRID）布局

用的人越来越多了，只有 0.7% 的受访者没了解过，我在平时中也用过，不过用的不多，大多数场景下 Flex 就能满足需求，你们呢？

子网格（Subgrid）布局

用过的人比去年多一些，不过没用过或者没了解过的仍然是大多数。

说实话，我也是没用过，特意学习了一下，故名思议，除了操纵同级别的网格，它拥有操纵子网格的能力，它可以实现比 Grid 更复杂的布局，比如下面的例子：

.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(4, minmax(100px, auto));
  gap: 20px;
}

.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  row-gap: 0;
}

.subitem {
  grid-column: 3 / 6;
  grid-row: 1 / 3;
}

多列布局（Multi-Column）

又是个我没用过的，不过好像这几年趋势变化也不大，大部分人还是没用过。

查了下，还挺好用的，之前这样的事我都是用 display:inline-block 去搞，现在一个属性就搞定了。

  
 code秘密花园 
  
 ConardLi 
  
 一些文本 ... 

.container {   column-count: 3; }

比如上面的 container 容器中有三个块级元素，给 container 指定 column-count: 3 后就可以让浏览器自动分成三列，并且计算出每一列分配多少空间。

position: sticky

这个就是我们平时所谓的吸顶布局，相信大多数小伙伴都用过或者了解过了。

逻辑属性（Logical Properties）

逻辑属性，是 CSS 新引入的的一项变革性能力，它的属性与值能做从逻辑角度控制布局，而不是从物理、方向或维度来控制。

目前调查来看，用过的人也不是很多，我们来简单介绍一下。

传统的 CSS 属性大多是采用物理属性来定义的，比如元素的尺寸，偏移和边距等属性。但是随着业务的发展，越来越多的web应用需要考虑到国家化，必须适配不同的语言。

大部分国家的语言排版都是从左到右，即LTR(left to right)，但是仍然有一部分语言采用的是从右到左，即RTL(right to left)的版本布局，比如阿拉伯语和希伯来语等。

图片展示了拉丁文，希伯来文和日语三种不同的书写方式。

逻辑属性 不仅可以让前端的布局在逻辑上更加严谨，而且能让开发者以更少的代码写出兼容性更好的页面。我们来看个简单的例子：

html

物理布局
    
        code

        秘密花园

    

    

逻辑布局

             code

        秘密花园