能否用Flexbox复现CSS Grid实现的网格布局示例？

我已经用CSS Grid轻松实现了如下布局，但我觉得没法用Flexbox复现，请问真的是这样吗？

原CSS Grid实现代码 #

CSS #

.Message {
  display: inline-grid;
  grid-template-areas: ". name""date text";
}

.Date {
  align-items: center;
  display: flex;
  grid-area: date;
}

.Name {
  grid-area: name;
}

.Text {
  grid-area: text;
}

.Date,
.Name,
.Text {
  border: 1px solid #f00;
  padding: 5px 10px;
}

HTML #

<div class="Message">
  <div class="Name">name</div>
  <div class="Date">date (vertically centered)</div>
  <div class="Text">three<br />line<br />text</div>
</div>

答案是否定的，这个布局完全可以用Flexbox复现，核心是利用Flex的换行、排序和对齐特性来模拟Grid的区域分布：

Flexbox实现方案 #

HTML（和原结构完全一致，无需修改） #

<div class="Message">
  <div class="Name">name</div>
  <div class="Date">date (vertically centered)</div>
  <div class="Text">three<br />line<br />text</div>
</div>

CSS #

.Message {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: fit-content;
}

.Name {
  order: 1;
  margin-left: auto;
}

.Date {
  order: 2;
  display: flex;
  align-items: center;
  align-self: stretch;
}

.Text {
  order: 3;
  flex: 1;
}

.Date,
.Name,
.Text {
  border: 1px solid #f00;
  padding: 5px 10px;
}

关键实现细节 #

• 用inline-flex + flex-wrap: wrap实现容器换行，max-width: fit-content保证容器宽度适配内容，和原inline-grid效果一致。
• 通过order属性调整元素显示顺序，对应Grid的区域位置：Name在右上角，Date在左下角，Text在右下角。
• 给Date设置align-self: stretch让它高度和Text同步，内部用align-items: center实现文字垂直居中。
• Name用margin-left: auto推到右侧，模拟Grid第一行的空列占位。

这样就能得到和Grid版本完全一致的布局效果。

内容的提问来源于stack exchange，提问作者Altaula