by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12118
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

本文内容分为两啪，一个是六边形头像效果的实现，而是金字塔布局（又称蜂巢布局）的实现。

一、六边形头像

不啰嗦，直接看代码和最终实现的效果，同样的，用的是CSS corner-shape属性。

img {
  aspect-ratio: cos(30deg);
  border-radius: 50% / 25%;
  corner-shape: bevel;
  width: 150px;
  border: 1px solid #0001;
  object-fit: cover;
}

实时渲染效果如下：

如果你是手机访问，或者一些很久没升级的国产浏览器，应当看不到效果，可以看下面的截图：

六边形头像的CSS代码是固定的，大家使用的时候直接复制粘贴就好了。

二、蜂窝布局实现方法

六边形也正好是蜂巢格子的形状，因此，非常适合用来实现金字塔一样的蜂窝布局。

实际上，这种布局在日常开发中也是比较常见的，例如我最近开发的某个页面就有这样的布局：

一般的开发人员遇到这种状况，可能会手工硬搓每个元素的定位，例如，例如匹配第一项元素，让其绝对定位居中，第二行元素保持Flex布局。

.item:first-child {
  /* 第一行特殊居中处理 */
  position: absolute;
}

其实可以试试Flex倒序排版。

Flex实现蜂窝布局

假设HTML结构如下：

<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

则可以试试如下所示的CSS：

.container {
  --size: 40px;
  --gap: 5px;
  --offset: calc((2 * var(--size) + var(--gap)) / (-4 * cos(30deg)));

  width: 240px;
  display: flex;
  flex-wrap: wrap-reverse;
  direction: rtl;
  justify-content: center;
  gap: var(--gap);
  padding-bottom: calc(-1 * var(--offset));
}

.container > span {
  aspect-ratio: cos(30deg);
  border-radius: 50% / 25%;
  corner-shape: bevel;
  width: calc(var(--size) * 2);
  margin-bottom: var(--offset);
  /* 排序倒序 */
  order: calc(-1 * sibling-index());
  /* 提示文字居中 */
  display: grid;
  place-items: center;
  background-color: deepskyblue;
  color: #fff;
}

此时的渲染效果如下截图所示：

不过Flex倒序只适合三个数量，如果超过，那么这个布局方法就无效了。

下面问题来了，有没有什么办法，无论列表数量多少，自动金字塔布局呢？

Grid实现蜂巢布局

有，Grid布局是可以实现这样的效果的。

我们先从最简单三个列表项开始实现，假设HTML代码如下：

<div class="container">
  <s></s>
  <s></s>
  <s></s>
</div>

如下CSS代码就可以有蜂窝布局效果了：

.container {
  --size: 40px;
  --gap: 5px;

  width: 240px;
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--size));
  justify-content: center;
  gap: var(--gap);
  padding-bottom: calc((2 * var(--size) + var(--gap)) / (4 * cos(30deg)));
  outline: 1px dotted;
}

.container > s {
  grid-column-end: span 2;
  aspect-ratio: cos(30deg);
  border-radius: 50% / 25%;
  corner-shape: bevel;
  /* 垂直方向间隙和gap保持一致 */
  margin-bottom: calc((2 * var(--size) + var(--gap)) / (-4 * cos(30deg)));
  background-color: deepskyblue;
}

.container > :nth-child(1) {
  grid-column-start: 3;
}

.container > :nth-child(2) {
  grid-column-start: 2;
}

原理很简单，只需要精确指定每一行第一个元素的grid-column-start值就好了，在Grid布局中，每一行后面的元素只会自动跟随排列的。

如果是三个列表元素，那么第一行的首元素序列是1，因此选择器是:nth-child(1)，第二行的首元素序列是2，因此选择器是:nth-child(2)，最后一个元素自动跟随，无需专门设置。

实时渲染效果如下：

不限数量全自动蜂巢布局

由于Chrome浏览器支持了if函数，因此，纯CSS实现不限数量全自动蜂巢布局成为了可能，具体实现代码如下：

@property --_n {syntax: "<integer>";initial-value: 1;inherits: true}
@property --_i {syntax: "<number>";initial-value: 1;inherits: true}
@property --_j {syntax: "<number>";initial-value: 1;inherits: true}
@property --_c {syntax: "<number>";initial-value: 1;inherits: true}
@property --_d {syntax: "<number>";initial-value: 1;inherits: true}

.container {
  --s: 40px;  /* 尺寸大小  */
  --g: 5px;   /* 间隙大小 */
  
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--s) var(--s));
  justify-content: center;
  gap: var(--g);
  padding-bottom: calc((2 * var(--s) + var(--g)) / (4 * cos(30deg)));
  container-type: inline-size;
}
.container > * {
  grid-column-end: span 2;
  aspect-ratio: cos(30deg);
  border-radius: 50% / 25%;
  corner-shape: bevel;
  margin-bottom: calc((2 * var(--s) + var(--g)) / (-4 * cos(30deg)));
  --_n: round(down, (100cqw + var(--g)) / (2 * (var(--s) + var(--g))));
  --_i: calc((sibling-index() - 2 + (var(--_n) * (3 - var(--_n))) / 2) / (2 * var(--_n) - 1));
  --_c: mod(var(--_i), 1);
  --_j: calc(sqrt(2 * sibling-index() - 1.75) - .5);
  --_d: mod(var(--_j), 1);
  grid-column-start: 
    if(
      style((--_i >= 1) and (--_c: 0)): 2; 
      style(--_d: 0): max(0, var(--_n) - var(--_j));
    );
}

先是根据容器尺寸和元素尺寸计算每行可以显示的数量，然后根据取模的值是不是整数，判断是不是每一行的第一项，通过if()函数设置精准的grid-column-start值。

原理虽然简单，但是实现细节还是很复杂的，比如大家无需深究，直接复制粘贴代码使用就可以了。

只需要将子元素换成图片元素，就可以轻松实现下图所示的蜂巢头像布局效果。

具体不展开，因为受制于兼容性限制，目前只能实验环境使用。

三、结语说明

前端三剑客中，CSS的发展是最快的，你看我写的新特性介绍文章，大多数都是CSS，并不是我刻意挑选，而真TM就是大多数前端新特性都是CSS。

考虑到CSS的学习热潮早就沉寂多年。

我觉得CSS这门语言离断层不远了，只要几年不关注，我跟大家讲，那些前沿的CSS代码，绝对是看不懂的。

各种新函数、属性还有语法糖层出不穷，就好比本文这个金字塔蜂巢布局中的CSS实现细节，我估计9成以上的前端是看不懂什么意思的。

其中出现的这些特性，我之前都有介绍：

1. corner-shape见此文：大开眼界的CSS corner-shape属性
2. aspect-ratio见此文：Chrome 88已经支持aspect-ratio属性了，学起来
3. round()、mod()等数学函数：Chrome也支持round等CSS数学函数了
4. cos()三角函数见：CSS sin()/cos()等数学三角函数简介与应用
5. sibling-index()索引序号函数介绍出处：CSS索引和数量匹配函数sibling-index sibling-count简介
6. if()函数介绍：CSS倒反天罡居然支持if()函数了
7. container-type和100cqw属于容器查询里面的知识：2022年最期待的CSS container容器查询

所以还是那句话，学习是不能停止的，时代变化很快，要是安于现状，说不定就会掉队。

参考文章：响应式金字塔网格

😉😊😇
🥰😍😘

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12118

（本篇完）

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12118
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

本文内容分为两啪，一个是六边形头像效果的实现，而是金字塔布局（又称蜂巢布局）的实现。

一、六边形头像

不啰嗦，直接看代码和最终实现的效果，同样的，用的是CSS corner-shape属性。

img {
  aspect-ratio: cos(30deg);
  border-radius: 50% / 25%;
  corner-shape: bevel;
  width: 150px;
  border: 1px solid #0001;
  object-fit: cover;
}

实时渲染效果如下：

如果你是手机访问，或者一些很久没升级的国产浏览器，应当看不到效果，可以看下面的截图：

六边形头像的CSS代码是固定的，大家使用的时候直接复制粘贴就好了。

二、蜂窝布局实现方法

六边形也正好是蜂巢格子的形状，因此，非常适合用来实现金字塔一样的蜂窝布局。

实际上，这种布局在日常开发中也是比较常见的，例如我最近开发的某个页面就有这样的布局：

一般的开发人员遇到这种状况，可能会手工硬搓每个元素的定位，例如，例如匹配第一项元素，让其绝对定位居中，第二行元素保持Flex布局。

.item:first-child {
  /* 第一行特殊居中处理 */
  position: absolute;
}

其实可以试试Flex倒序排版。

Flex实现蜂窝布局

假设HTML结构如下：

<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

则可以试试如下所示的CSS：

.container {
  --size: 40px;
  --gap: 5px;
  --offset: calc((2 * var(--size) + var(--gap)) / (-4 * cos(30deg)));

  width: 240px;
  display: flex;
  flex-wrap: wrap-reverse;
  direction: rtl;
  justify-content: center;
  gap: var(--gap);
  padding-bottom: calc(-1 * var(--offset));
}

.container > span {
  aspect-ratio: cos(30deg);
  border-radius: 50% / 25%;
  corner-shape: bevel;
  width: calc(var(--size) * 2);
  margin-bottom: var(--offset);
  /* 排序倒序 */
  order: calc(-1 * sibling-index());
  /* 提示文字居中 */
  display: grid;
  place-items: center;
  background-color: deepskyblue;
  color: #fff;
}

此时的渲染效果如下截图所示：

不过Flex倒序只适合三个数量，如果超过，那么这个布局方法就无效了。

下面问题来了，有没有什么办法，无论列表数量多少，自动金字塔布局呢？

Grid实现蜂巢布局

有，Grid布局是可以实现这样的效果的。

我们先从最简单三个列表项开始实现，假设HTML代码如下：

<div class="container">
  <s></s>
  <s></s>
  <s></s>
</div>

如下CSS代码就可以有蜂窝布局效果了：

.container {
  --size: 40px;
  --gap: 5px;

  width: 240px;
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--size));
  justify-content: center;
  gap: var(--gap);
  padding-bottom: calc((2 * var(--size) + var(--gap)) / (4 * cos(30deg)));
  outline: 1px dotted;
}

.container > s {
  grid-column-end: span 2;
  aspect-ratio: cos(30deg);
  border-radius: 50% / 25%;
  corner-shape: bevel;
  /* 垂直方向间隙和gap保持一致 */
  margin-bottom: calc((2 * var(--size) + var(--gap)) / (-4 * cos(30deg)));
  background-color: deepskyblue;
}

.container > :nth-child(1) {
  grid-column-start: 3;
}

.container > :nth-child(2) {
  grid-column-start: 2;
}

原理很简单，只需要精确指定每一行第一个元素的grid-column-start值就好了，在Grid布局中，每一行后面的元素只会自动跟随排列的。

如果是三个列表元素，那么第一行的首元素序列是1，因此选择器是:nth-child(1)，第二行的首元素序列是2，因此选择器是:nth-child(2)，最后一个元素自动跟随，无需专门设置。

实时渲染效果如下：

不限数量全自动蜂巢布局

由于Chrome浏览器支持了if函数，因此，纯CSS实现不限数量全自动蜂巢布局成为了可能，具体实现代码如下：

@property --_n {syntax: "<integer>";initial-value: 1;inherits: true}
@property --_i {syntax: "<number>";initial-value: 1;inherits: true}
@property --_j {syntax: "<number>";initial-value: 1;inherits: true}
@property --_c {syntax: "<number>";initial-value: 1;inherits: true}
@property --_d {syntax: "<number>";initial-value: 1;inherits: true}

.container {
  --s: 40px;  /* 尺寸大小  */
  --g: 5px;   /* 间隙大小 */
  
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--s) var(--s));
  justify-content: center;
  gap: var(--g);
  padding-bottom: calc((2 * var(--s) + var(--g)) / (4 * cos(30deg)));
  container-type: inline-size;
}
.container > * {
  grid-column-end: span 2;
  aspect-ratio: cos(30deg);
  border-radius: 50% / 25%;
  corner-shape: bevel;
  margin-bottom: calc((2 * var(--s) + var(--g)) / (-4 * cos(30deg)));
  --_n: round(down, (100cqw + var(--g)) / (2 * (var(--s) + var(--g))));
  --_i: calc((sibling-index() - 2 + (var(--_n) * (3 - var(--_n))) / 2) / (2 * var(--_n) - 1));
  --_c: mod(var(--_i), 1);
  --_j: calc(sqrt(2 * sibling-index() - 1.75) - .5);
  --_d: mod(var(--_j), 1);
  grid-column-start: 
    if(
      style((--_i >= 1) and (--_c: 0)): 2; 
      style(--_d: 0): max(0, var(--_n) - var(--_j));
    );
}

先是根据容器尺寸和元素尺寸计算每行可以显示的数量，然后根据取模的值是不是整数，判断是不是每一行的第一项，通过if()函数设置精准的grid-column-start值。

原理虽然简单，但是实现细节还是很复杂的，比如大家无需深究，直接复制粘贴代码使用就可以了。

只需要将子元素换成图片元素，就可以轻松实现下图所示的蜂巢头像布局效果。

具体不展开，因为受制于兼容性限制，目前只能实验环境使用。

三、结语说明

前端三剑客中，CSS的发展是最快的，你看我写的新特性介绍文章，大多数都是CSS，并不是我刻意挑选，而真TM就是大多数前端新特性都是CSS。

考虑到CSS的学习热潮早就沉寂多年。

我觉得CSS这门语言离断层不远了，只要几年不关注，我跟大家讲，那些前沿的CSS代码，绝对是看不懂的。

各种新函数、属性还有语法糖层出不穷，就好比本文这个金字塔蜂巢布局中的CSS实现细节，我估计9成以上的前端是看不懂什么意思的。

其中出现的这些特性，我之前都有介绍：

1. corner-shape见此文：大开眼界的CSS corner-shape属性
2. aspect-ratio见此文：Chrome 88已经支持aspect-ratio属性了，学起来
3. round()、mod()等数学函数：Chrome也支持round等CSS数学函数了
4. cos()三角函数见：CSS sin()/cos()等数学三角函数简介与应用
5. sibling-index()索引序号函数介绍出处：CSS索引和数量匹配函数sibling-index sibling-count简介
6. if()函数介绍：CSS倒反天罡居然支持if()函数了
7. container-type和100cqw属于容器查询里面的知识：2022年最期待的CSS container容器查询

所以还是那句话，学习是不能停止的，时代变化很快，要是安于现状，说不定就会掉队。

参考文章：响应式金字塔网格

😉😊😇
🥰😍😘

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12118

（本篇完）

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11889
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

继续介绍前端前沿新特性，这次介绍的是两个改进键盘无障碍访问的CSS属性reading-flow和reading-order。

一、Tabindex属性的问题

在Web开发中，DOM文档的属性和视觉表现顺序不一致是很正常的。

但是，此时，如果我们不进行干预，用户在使用Tab键进行索引访问的时候，顺序就会出现问题，导致困惑。

在过去，我们会使用tabindex属性进行交互处理。举个例子：

<div class="box" aria-owns="第一 第三 第二">
  <a href="#" tabindex="1" id="one">第一</a>
  <a href="#" tabindex="3" id="two">第二</a>
  <a href="#" tabindex="2" id="three">第三</a>
</div>

tabindex值为3的地2项就会被最后一个获取。

关于tabindex属性的具体规则，可以参见我之前的文章“HTML tabindex属性与web网页键盘无障碍访问”，或者购买《HTML并不简单》这本书，其中有详细介绍。

在比较简单的页面，我们使用tabindex属性是没问题的，但是页面比较复杂，有非常多的地方有类似的结构，那就会出现tabindex设置冲突的问题，因为tabindex的索引控制是全局的。

对于，对于这种局部布局的tabindex属性调整，需要有更加友好的特性，在这种背景下，reading-flow和reading-order属性应运而生。

二、重点关注reading-flow属性

在大多数场景下，我们都是使用reading-flow属性，且需要与Flex布局和Grid布局配合使用。

我们先看使用案例，HTML和CSS代码如下所示：

<div class="box">
 <a href="##">张</a>
 <a href="##">鑫</a>
 <a href="##">旭</a>
</div>

.box {
  display: flex;
  :nth-child(1) {
    order: 2;
  }
}

实时效果如下所示，您可以尝试使用 TAB 键查找下一个可聚焦元素，使用 TAB+SHIFT 键查找上一个可聚焦元素，观察焦点聚焦的顺序。

友情提示，可以先点击框框的空白处，再按下Tab键，下同。

结果会发现，第一个被聚焦的元素是视觉表现上排在随后的元素，如下截图所示：

这就会产生困惑，对吧，此时我们可以使用 reading-flow 属性优化此问题，一行代码的事情：

.box {
  reading-flow: flex-visual;
}

我们再来看下实时渲染效果（Chrome 137+）：

此时第一个聚焦的元素就是最前面的“鑫”字啦。

flex-flow的作用

如果Flex容器设置设置reading-flow:flex-flow，那么，浏览器读取内容的方向就会和flex-flow属性保持一致。

PS：flex-flow属性是flex-direction和flex-wrap属性的缩写属性。

例如flex容器新增CSS样式：

.box {
  flex-direction: row-reverse;
  reading-flow: flex-flow;
}

那么焦点聚焦的顺序就会是“鑫-旭-张”，从后往前依次聚焦，实时渲染效果如下：

如果我们取消第一项所设置的order:2，焦点方向还是从后往前，也就是按照Flex方向的聚焦顺序，不受DOM在文档中的顺序影响。

三、Grid布局中的reading-flow属性

由于Grid是二维布局的，因此，在Grid布局中，reading-flow属性支持的值要多一些，示意：

reading-flow: grid-columns;
reading-flow: grid-rows;
reading-flow: grid-order;

还是通过案例进行学习。

HTML基本结构和CSS如下：

<<div class="wrapper">
 <a href="#">甲</a>
 <a href="#">乙</a>
 <a href="#">丙</a>
 <a href="#">丁</a>
 <a href="#">戊</a>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}
.wrapper a:nth-child(2) {
  grid-column: 3;
  grid-row: 2 / 4;
}
.wrapper a:nth-child(5) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

此时的布局效果渲染如下，Tab索引顺序则按照DOM的顺序执行，也就是甲乙丙丁戊，但是，这并不是布局上的视觉顺序。

如果我们希望Tab顺序按照视觉顺序水平聚焦，则就可以设置：

.wrapper {
  reading-flow: grid-rows;
}

实时渲染效果如下：

此时，焦点聚焦的顺序就是“戊-甲-乙-丙-丁”，如下示意图所示：

再看看grid-columns的效果：

.wrapper {
  reading-flow: grid-columns;
}

可以键盘访问下面的布局亲自感受焦点顺序（Chrome 137+）：

此时，焦点聚焦的顺序就是“戊-丙-丁-甲-乙”，如下示意图所示：

关于grid-order

这个用在使用order属性改变网格顺序的场景下，此时，焦点属性会优先按照order属性切换，例如：

.wrapper {
  reading-flow: grid-order;
}
.wrapper a:nth-child(4) {
  order: -1;
}

此时，优先被聚焦的是“丁”这个设置了order:-1的网格。

实时效果：

四、什么时候使用reading-order属性

reading-order属性通常和reading-flow:source-order声明配合使用，可以强制任意布局中，子项的焦点获取顺序，值为数值，可以是负值，例如：

<div class="follow">
 <a href="##">欢迎</a>
 <a href="##">抖音</a>
 <a href="##">关注</a>
<a href="##" class="me">最会钓鱼的程序员</a>
</div>

.follow {
  display: flow-root;
  reading-flow: source-order;
}
.me {
  reading-order: -1;
}

实时效果如下，可以看到，我的抖音钓鱼账号的名称“最会钓鱼的程序员”被第一个聚焦了！

截图示意：

四、兼容性、结语

目前reading-flow和reading-order属性仅Chrome浏览器，极其使用其内核的浏览器支持：

不过此特性是渐进增强特性，可以放心使用，基本上，我建议，只要是Flex布局，都可以加上reading-flow:flex-visual这么一句话，浏览器不支持，或者Flex布局本身顺序正常，那就还和现在一样，但是如果浏览器支持，用户的无障碍访问体验就会UP，这种只有好处，没有坏处的事情，没有理由不去做他！

结语碎碎念

这些边边角角的CSS新特性实在是太多了，我每周介绍一个，感觉都来不及。

但是，怎么讲呢？大多都是锦上添花的东西，现有的技术也能解决，但是由于兼容性等原因，学了，也不能立即使用，这就导致这些新特性啊，大多都会湮没在时代的洪流中。

以后这种学习的事情啊，我觉得都会交给AI了。

来，我的仆人AI酱，帮我把这段代码的无障碍访问体验提高下。

然后AI酱：“好滴，我最美丽的主人，让我看看这段代码，哦，这样子，我明白了，确实可以提升，我搜到了一个名叫钓鱼佬的博客，里面有介绍到reading-flow和reading-order属性，可以一用……”

瞧瞧没，需要学习吗？不需要。

那我写这些东西还有什么意义呢？值得深思的问题。

好了，就这样吧，感谢阅读，欢迎转发，在新特性的学习这方面，人类比AI还是有个半年到一年的优势的。

有请落云宗柳玉掌门压阵：

😉😊😇
🥰😍😘

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11889

（本篇完）

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11889
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

继续介绍前端前沿新特性，这次介绍的是两个改进键盘无障碍访问的CSS属性reading-flow和reading-order。

一、Tabindex属性的问题

在Web开发中，DOM文档的属性和视觉表现顺序不一致是很正常的。

但是，此时，如果我们不进行干预，用户在使用Tab键进行索引访问的时候，顺序就会出现问题，导致困惑。

在过去，我们会使用tabindex属性进行交互处理。举个例子：

<div class="box" aria-owns="第一 第三 第二">
  <a href="#" tabindex="1" id="one">第一</a>
  <a href="#" tabindex="3" id="two">第二</a>
  <a href="#" tabindex="2" id="three">第三</a>
</div>

tabindex值为3的地2项就会被最后一个获取。

关于tabindex属性的具体规则，可以参见我之前的文章“HTML tabindex属性与web网页键盘无障碍访问”，或者购买《HTML并不简单》这本书，其中有详细介绍。

在比较简单的页面，我们使用tabindex属性是没问题的，但是页面比较复杂，有非常多的地方有类似的结构，那就会出现tabindex设置冲突的问题，因为tabindex的索引控制是全局的。

对于，对于这种局部布局的tabindex属性调整，需要有更加友好的特性，在这种背景下，reading-flow和reading-order属性应运而生。

二、重点关注reading-flow属性

在大多数场景下，我们都是使用reading-flow属性，且需要与Flex布局和Grid布局配合使用。

我们先看使用案例，HTML和CSS代码如下所示：

<div class="box">
 <a href="##">张</a>
 <a href="##">鑫</a>
 <a href="##">旭</a>
</div>

.box {
  display: flex;
  :nth-child(1) {
    order: 2;
  }
}

实时效果如下所示，您可以尝试使用 TAB 键查找下一个可聚焦元素，使用 TAB+SHIFT 键查找上一个可聚焦元素，观察焦点聚焦的顺序。

友情提示，可以先点击框框的空白处，再按下Tab键，下同。

结果会发现，第一个被聚焦的元素是视觉表现上排在随后的元素，如下截图所示：

这就会产生困惑，对吧，此时我们可以使用 reading-flow 属性优化此问题，一行代码的事情：

.box {
  reading-flow: flex-visual;
}

我们再来看下实时渲染效果（Chrome 137+）：

此时第一个聚焦的元素就是最前面的“鑫”字啦。

flex-flow的作用

如果Flex容器设置设置reading-flow:flex-flow，那么，浏览器读取内容的方向就会和flex-flow属性保持一致。

PS：flex-flow属性是flex-direction和flex-wrap属性的缩写属性。

例如flex容器新增CSS样式：

.box {
  flex-direction: row-reverse;
  reading-flow: flex-flow;
}

那么焦点聚焦的顺序就会是“鑫-旭-张”，从后往前依次聚焦，实时渲染效果如下：

如果我们取消第一项所设置的order:2，焦点方向还是从后往前，也就是按照Flex方向的聚焦顺序，不受DOM在文档中的顺序影响。

三、Grid布局中的reading-flow属性

由于Grid是二维布局的，因此，在Grid布局中，reading-flow属性支持的值要多一些，示意：

reading-flow: grid-columns;
reading-flow: grid-rows;
reading-flow: grid-order;

还是通过案例进行学习。

HTML基本结构和CSS如下：

<<div class="wrapper">
 <a href="#">甲</a>
 <a href="#">乙</a>
 <a href="#">丙</a>
 <a href="#">丁</a>
 <a href="#">戊</a>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}
.wrapper a:nth-child(2) {
  grid-column: 3;
  grid-row: 2 / 4;
}
.wrapper a:nth-child(5) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

此时的布局效果渲染如下，Tab索引顺序则按照DOM的顺序执行，也就是甲乙丙丁戊，但是，这并不是布局上的视觉顺序。

如果我们希望Tab顺序按照视觉顺序水平聚焦，则就可以设置：

.wrapper {
  reading-flow: grid-rows;
}

实时渲染效果如下：

此时，焦点聚焦的顺序就是“戊-甲-乙-丙-丁”，如下示意图所示：

再看看grid-columns的效果：

.wrapper {
  reading-flow: grid-columns;
}

可以键盘访问下面的布局亲自感受焦点顺序（Chrome 137+）：

此时，焦点聚焦的顺序就是“戊-丙-丁-甲-乙”，如下示意图所示：

关于grid-order

这个用在使用order属性改变网格顺序的场景下，此时，焦点属性会优先按照order属性切换，例如：

.wrapper {
  reading-flow: grid-order;
}
.wrapper a:nth-child(4) {
  order: -1;
}

此时，优先被聚焦的是“丁”这个设置了order:-1的网格。

实时效果：

四、什么时候使用reading-order属性

reading-order属性通常和reading-flow:source-order声明配合使用，可以强制任意布局中，子项的焦点获取顺序，值为数值，可以是负值，例如：

<div class="follow">
 <a href="##">欢迎</a>
 <a href="##">抖音</a>
 <a href="##">关注</a>
<a href="##" class="me">最会钓鱼的程序员</a>
</div>

.follow {
  display: flow-root;
  reading-flow: source-order;
}
.me {
  reading-order: -1;
}

实时效果如下，可以看到，我的抖音钓鱼账号的名称“最会钓鱼的程序员”被第一个聚焦了！

截图示意：

四、兼容性、结语

目前reading-flow和reading-order属性仅Chrome浏览器，极其使用其内核的浏览器支持：

不过此特性是渐进增强特性，可以放心使用，基本上，我建议，只要是Flex布局，都可以加上reading-flow:flex-visual这么一句话，浏览器不支持，或者Flex布局本身顺序正常，那就还和现在一样，但是如果浏览器支持，用户的无障碍访问体验就会UP，这种只有好处，没有坏处的事情，没有理由不去做他！

结语碎碎念

这些边边角角的CSS新特性实在是太多了，我每周介绍一个，感觉都来不及。

但是，怎么讲呢？大多都是锦上添花的东西，现有的技术也能解决，但是由于兼容性等原因，学了，也不能立即使用，这就导致这些新特性啊，大多都会湮没在时代的洪流中。

以后这种学习的事情啊，我觉得都会交给AI了。

来，我的仆人AI酱，帮我把这段代码的无障碍访问体验提高下。

然后AI酱：“好滴，我最美丽的主人，让我看看这段代码，哦，这样子，我明白了，确实可以提升，我搜到了一个名叫钓鱼佬的博客，里面有介绍到reading-flow和reading-order属性，可以一用……”

瞧瞧没，需要学习吗？不需要。

那我写这些东西还有什么意义呢？值得深思的问题。

好了，就这样吧，感谢阅读，欢迎转发，在新特性的学习这方面，人类比AI还是有个半年到一年的优势的。

有请落云宗柳玉掌门压阵：

😉😊😇
🥰😍😘

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11889

（本篇完）