-ms-flexbox_Flexbox的上一个-下一个UI导航模式

-ms-flexbox

A major goal of design and development is to create “sticky” pages that maximize the average user’s time on the site. Engaging users with compelling content increases brand loyalty, and raises the likelihood that they will further engage with the site and its advertisers.

设计和开发的主要目标是创建“粘性”页面，以最大化用户在网站上的平均时间。 用引人入胜的内容吸引用户可以提高品牌忠诚度，并提高他们进一步与网站及其广告客户互动的可能性。

There are many ways to create sticky content and services, but perhaps the most dependable is to offer links to related pages on the site. In the case of this site, that’s done in three places: the random feature bar at the top, relevant words linked in the body text, and a “previous - next” navigation at the bottom, directing the reader to logical destinations after completing the article. On this site, that previous-next arrangement is displayed using flexbox.

创建粘性内容和服务的方法有很多，但是最可靠的方法可能是提供指向网站上相关页面的链接。 对于本网站，该操作在三个地方完成：顶部的随机功能栏，正文中链接的相关单词以及底部的“上一个-下一个”导航，可在完成导航后将读者定向到逻辑目的地文章。 在此站点上，使用flexbox显示该上一个-下一个安排。

安排 (Arrangement)

Not every article on this site has logical previous and next relationships: for example, the first article in a reading list will have a “next” but no previous, and the last will have a “previous” but no next. The navigation module must be adaptive to each of these possibilities, maintaining a spatial relationship with the user: “next” will always be to the right, and “previous” should always appear on the left.

并非该站点上的所有文章都具有逻辑上的上一个和下一个关系：例如， 阅读列表中的第一篇文章将具有“下一个”但没有上一个，而最后一篇文章将具有“上一个”但没有下一个。 导航模块必须适应所有这些可能性，并与用户保持空间关系：“下一个”将始终在右侧，而“上一个”将始终在左侧。

It’s noteworthy that a truly internationalized site would reverse the position of these elements in some cases: languages that read right-to-left, such as Arabic and Hebrew, conceptually place things that are in the future to the left, and things that are in the past, or previous, to the right.

值得注意的是，真正国际化的网站在某些情况下会颠倒这些元素的位置：从右至左阅读的语言(例如阿拉伯语和希伯来语 )在概念上将未来的事物放在左边 ，而将右边的过去或以前。

I’ll start with the simplest case of both a previous and a next article. Each link contains two <span> elements: one <span> surrounding the thumbnail image associated with the article, the other surrounding the title of the piece. Note that these elements appear in reversed order for the “next” link.

我将从上一篇和下一篇文章的最简单的情况开始。 每个链接包含两个<span>元素：一个<span>围绕与文章关联的缩略图，另一个围绕该作品的标题。 请注意，这些元素在“下一个”链接中的显示顺序相反。

<div id="prevnext" class="flex apart">  
    <a class="prev-one flex" href="/.." rel="prev" accesskey=",">
        <span class="thumb">
            <img src="card-shuffle.jpg" alt" srcset="card-shuffle-2x.jpg 2x">
        </span>
        <span class="articlename">
            Shuffling and Sorting JavaScript Arrays
        </span>
    </a>
    <a class="next-one flex" href="/.." rel="next" accesskey=".">
        <span class="articlename">
            JavaScript Fundamentals: Object Literals and Nested Arrays
        </span>
        <span class="thumb">
            <img src="jet-nest.jpg" alt srcset="jet-nest-2x.jpg 2x">
        </span>
    </a>
</div>

The markup uses many techniques I’ve discussed in previous articles:

标记使用了我在之前的文章中讨论过的许多技术：

• rel attributes and accesskey shortcuts for accessibility and SEO.

  rel属性和accesskey快捷方式，用于辅助功能和SEO 。

• srcset for Retina graphics.

  视网膜图形的 srcset 。

• a series of classes, which will guide the elements to be distributed in CSS.
  一系列的类，这些类将指导要在CSS中分发的元素。

CSS (CSS)

The navigation module is cleared to ensure that nothing “creeps” around it:

清除了导航模块，以确保周围没有任何“蠕变”：

#prevnext {
    margin-top: 1rem;
    clear: both;
}

Since I use flexbox extensively throughout the site, I’ve created two generic “helper” classes to set elements into display: flex and push their content apart. (Note that vendor-prefixed code would need to be added to achieve backwards compatibility with older browsers).

由于我在整个网站上广泛使用flexbox ，因此我创建了两个通用的“帮助程序” 类以将元素设置为display: flex并将其内容分开。 (请注意，需要添加供应商前缀的代码以实现与旧版浏览器的向后兼容性)。

.flex {
    display: flex;
}
.apart {
    justify-content: space-between;
}

The links also take the flex class, meaning that they’re also set to display: flexbox. This is further modified to ensure that links take up the same amount of horizontal space as each other, and are aligned on their centers:

链接也采用flex类，这意味着它们也设置为display: flexbox 。 对此进行了进一步修改，以确保链接占据彼此相同数量的水平空间，并在其中心对齐：

#prevnext a {
    font-size: smaller;
    align-items: center;
}
a.prev-one {
    flex: 1;
}
a.next-one {
    flex: 1;
    justify-content: flex-end;
}

justify-content: flex-end means that the “next” link will always appear at the horizontal end of the available space.

justify-content: flex-end表示“下一个”链接将始终出现在可用空间的水平端 。

Links take a general style that they also share with body text:

链接采用一般样式，它们也与正文共享。

a {
    text-decoration: none;
    color: rgba(0,0,0,0.8);
    border-bottom: 1px solid #edd;
}

The <span> elements are sized, and the images within them turned into circles using border-radius:

调整<span>元素的大小，并使用border-radius将其中的图像变成圆形：

#prevnext a span.thumb img {
    border-radius: 50%;
    overflow: hidden;
    width: 125px;
    min-width: 125px;
    height: 100%;
    border: 1px solid #ccc;
}

Article names are separated from the thumbnails using margin on the appropriate side. Text on the right will be flush left by default, so we change that to its opposite:

文章名称与缩略图之间用适当的margin隔开。 默认情况下， 右侧的文本将向左对齐，因此我们将其改为相反：

a.prev-one span.articlename {
    margin-left: 1rem;
}
a.next-one span.articlename {
    margin-right: 1rem;
    text-align: right;
}

The arrows either side of the text links are generated with pseudo-element selectors:

文本链接两侧的箭头是使用伪元素选择器生成的：

a.prev-one span.articlename:before {
    content: "\2190 ";
}
a.next-one span.articlename:after {
    content: " \2192";
}

If there’s no “next” link, the “previous” link will appear by itself, with the text running to the right. If the “previous” link is absent, the “next” link will appear on the right.

如果没有“下一个”链接，则“上一个”链接将单独出现，文字在右侧运行。 如果没有“上一个”链接，则“下一个”链接将出现在右侧。

There’s just one small remaining problem. If the text for either link wraps across two or more lines, the text on the other side is out of vertical alignment with it. Flexbox can’t solve this: it’s great at aligning elements on their centers, but it can’t “look ahead” and determine that because text in one element is across two lines, it should move up the next in a previous element. That can, however, be addressed with JavaScript, which I’ll look at next.

剩下的只有一个小问题。 如果任一链接的文本都用两行或多行换行，则另一侧的文本与其垂直对齐。 Flexbox无法解决这个问题：它非常适合在元素的中心对齐，但是它不能“向前看”并确定由于一个元素中的文本跨越两行，因此它应该在上一个元素中的下一行上移。 但是，可以使用JavaScript来解决，我将在下面讨论。

翻译自: https://thenewcode.com/1106/A-Previous-Next-UI-Navigation-Pattern-with-Flexbox

-ms-flexbox