CSS Flex响应式布局：空间充足时标题居两导航间、不足时换行

不用修改现有HTML结构，只调整CSS即可实现需求，核心采用移动端优先的Flex+定位逻辑：

• 小屏默认开启flex换行，导航栏占满整行，两个按钮左右分布，标题元信息块自动折到第二行居中
• 大屏通过媒体查询将导航栏设为绝对定位撑满容器宽度、脱离文档流，让居中的标题块刚好落在两个导航按钮中间

/* 基础样式 适配小屏设备 */
#post-head {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  background-color: @col-3-1;
  margin-left: -1vw;
  margin-right: -1vw;
  padding: 20px 0;
}

#post-meta {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: center;
  font-family: maven;
  font-weight: 700;
}

#post-title {
  font-size: 40px;
  margin-top: 10px;
  color: white;
}

#post-date {
  font-size: 24px;
  color: fade(white, 80);
}

#post-tags {
  padding: 15px;
  font-weight: 300;
}

#post-tags>div {
  display: inline-block;
  padding: 3px 12px;
  background-color: fade(black, 20);
  border-radius: 15px;
  border: 1px solid fade(white, 20);
  margin: 0 4px;
}

#post-nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
}

#post-nav>div {
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid white;
  padding: 10px;
  min-width: 120px;
  cursor: pointer;
}

/* 大屏适配 宽度断点可根据项目全局规则调整 */
@media screen and (min-width: 768px) {
  #post-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  #post-meta {
    width: auto;
    padding: 0 160px;
    margin: 0 auto;
  }
}

效果说明 #

• 屏幕宽度小于768px时，导航栏占满顶部第一行，上一篇、下一篇按钮分别靠左右对齐，标题、发布日期、标签自动换行到导航栏下方居中显示，匹配小屏预期
• 屏幕宽度大于等于768px时，导航栏绝对定位撑满整个头部容器，两个按钮分别固定在头部左右两侧，标题等元信息居中显示在两个按钮中间，匹配大屏预期

可根据实际按钮宽度调整大屏下#post-meta的左右内边距，避免长标题和导航按钮重叠。

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