Flexbox 能否在不影响 SEO 的情况下实现动态重新排序？

使用 Flexbox 仅 CSS 重新排序

挑战：

维护搜索引擎 -友好且语义化的 DOM 结构，同时在特定位置展示元素，避免不必要的重复。

布局要求：

• 基于 Flexbox 的布局，在桌面上垂直居中
• 没有已知或固定的高度
• 桌面上右列的标签团队行为
• 支持 IE11

可行性：

纯 CSS 解决方案：

不幸的是，纯 CSS Flexbox 本身并不支持如此复杂的重新排序。但是，可以通过利用固定高度进行折衷：

<code class="css">.flex {
  height: 90vh;
  flex-flow: column wrap;
}
.flex div {
  flex: 1;
  width: 50%;
}
.flex div:nth-child(2) {
  order: -1;
}</code>

基于 JS 的解决方案：

或者，您可以剪切绿色 div 并粘贴其内容使用 JavaScript 将其变为粉红色。这种方法可能会带来性能和闪烁问题，但可以根据特定场景进行定制。

固定高度示例：

以下代码演示了仅使用 CSS 的工作方式使用固定高度的解决方案：

<code class="css">.flex {
  height: 90vh;
}</code>

以上是Flexbox 能否在不影响 SEO 的情况下实现动态重新排序？的详细内容。更多信息请关注PHP中文网其他相关文章！