换行后 CSS Grid 或 Flex 中元素的不同对齐方式

Question

我建议运行下面的代码 sn-p 以更好地理解这个问题，因为它是一个布局问题，并且在视觉上更容易理解。

我的页面上有一个元素需要在同一“行”中显示一个左对齐的项目（标题）和右对齐的另一个项目（日期/时间）。我使用 CSS Grid 轻松完成了这项工作。

我的设计师告诉我，当我们在移动设备上显示时，它应该显示标题左对齐，而日期/时间在下一行显示，也左对齐。 CSS Flex 优雅地做到了这一点。

有没有一种方法可以让 CSS Grid 或 CSS Flex 完成这两项工作，而无需费劲？

我试图避免的是必须编写大量的@media 断点，并尽可能有机地处理它。

感谢您提供的任何建议。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-weight: bold;
}

.date {
  justify-self: end;
}

.flex-container {
  display: flex;
  flex-direction: column;
  font-weight: bold;
}

When on a wide device screen (e.g. Desktop Web Browser) I want the layout to look like this. The title should be on the left and left aligned, the date/time should be on the right and right aligned. The should adjust with the page width.
<p>
  <div class="container">
    <div>Some Title</div>
    <div class="date">01/26/2021 10:30am</div>
  </div>
</p>

However, when on a small device screen (e.g. smart phone) the Title should appear on one line, left aligned, and the Date/Time should appear below it, also left aligned.
<p>
  <div class="flex-container">
    <div>Some Title</div>
    <div class="date">01/26/2021 10:30am</div>
  </div>
</p>

Is there a way to accomplish this easily, hopefully using CSS Grid or Flex, rather than hard coding CSS changed to breakpoints? 

Answer 1

Flexbox 真的是你所需要的。

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

<div class="container">
  <div>Some Title</div>
  <div class="date">01/26/2021 10:30am</div>
</div>