我使用 CSS Flexbox 创建了 Red Onion 的《预言家日报》副本

如果你看过红洋葱的《预言家日报》页面，你就会知道它是一个非常出色且富有创意的布局，它使用 CSS 网格布局构建而成。它类似于老式的印刷布局，在网络上复制似乎颇具挑战性。如果你想学习如何使用 flexbox 布局，那么使用 flexbox 而不是 CSS 网格来创建一个它的克隆版将是一个非常大的挑战。（我猜我学长发链接给我的时候也是这么想的。）

尽管 flexbox 和 css grid 已经存在了一段时间，但我并没有真正使用它们，因为我大部分时间都依赖现有的 css 框架（我知道）。

所以我决定做这个练习来找出它是否真的像看起来那么复杂，以下是我学到的东西。

盒子里的景象

乍一看，这个页面布局似乎很复杂，但我发现，如果把每个部分看成一个盒子，就会更容易理解。这就是这个页面在盒子里的样子。

内联和阻塞元素

有些框会以内联方式显示，而有些则会以块状方式显示。默认情况下，当一个弹性父框有多个子框时，这些子框会并排显示在一行中。

为了在自己的块中显示每个子项，您可以使用flex-direction属性作为列。

包裹重叠元素

需要考虑的最重要的事情之一是页面在较小设备上的显示效果（或页面响应度）。默认情况下，使用弹性盒子时，项目不会换行。因此，随着屏幕变小，部分内容将不可见。为了使它们适应新的视口大小，您必须将flex-wrap属性声明为wrap。

.parent {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;

    .child {}
}

将元素置于中心

如果我需要在元素内垂直和水平居中文本，过去我会使用父元素和子元素的定位。

但是使用 flexbox，您可以使用justify-content和align-items来实现这种精确的行为。

<div class="exclusive-story__marker">exclusive</div>

.exclusive-story__marker {
    display: flex;
    align-items: center;
    justify-content: center;
}

额外的学习

当原始字体不可用时使用替代字体

原始页面使用Headline One HPLHS作为新闻标题，但我在 Google 字体上找不到完全相同的字体，所以我决定使用 serif 字体，因为它看起来也适合报纸标题。如果使用完全相同的字体就更好了，但目前没有必要。我的目标是学习如何使用 flexbox，而不是制作一个像素级的页面复制品。

避免在 div 上使用高度，以防止在较小的屏幕上内容重叠

用盒子来划分页面部分是一种非常有用的方法，但它也让我开始思考高度的问题。是的，高度。我开始给那些看起来有特定高度的盒子分配高度，比如出版物名称部分和独家报道部分。

但是当我减小视口的尺寸时，其中的文本和图像与弹性容器重叠，所以我决定删除那些高度声明。

最后...

1. 使用 object-fit:cover 裁剪图像并显示中心

2. 使用首字母伪代码使段落的首字母比句子的其余部分更大，就像在报纸中一样。

总的来说，我非常喜欢这个练习。我对弹性盒子的工作原理有了更深入的理解。还有很多弹性属性我还没用过，比如 flex-basis、order、flex-shrink，不过现在还好，我可以边学边学。

感谢您的阅读，您可以查看克隆的页面@CodePen。

有反馈/评论，请告诉我。

*《预言家日报》的版权归红洋葱所有。

附言：如果没有我的前辈/导师 Dinesh Pandiyan @flexdinesh的鼓励，这一切都不可能实现。谢谢你。