如何用Flexbox实现餐厅页脚内容分两侧居中对齐？

你的思路完全可行，不用手动调边距内边距，用基础CSS+Flexbox就能轻松搞定，直接看代码：

HTML结构 #

<footer class="restaurant-footer">
  <div class="footer-left">
    <p>加入我们的邮件列表！</p>
  </div>
  <div class="footer-right">
    <nav>
      <a href="#">首页</a>
      <a href="#">菜单</a>
      <a href="#">关于我们</a>
      <a href="#">联系我们</a>
    </nav>
  </div>
</footer>

CSS样式 #

/* 页脚父容器 */
.restaurant-footer {
  display: flex;
  width: 100%;
  /* 可选：给页脚加背景色和内边距，避免内容贴边 */
  background-color: #f5f5f5;
  padding: 1rem 0;
}

/* 左右子容器平分宽度 */
.footer-left, .footer-right {
  flex: 1; /* 这个属性让两个子元素自动平分页脚可用宽度 */
  display: flex;
  justify-content: center; /* 水平居中内容 */
  align-items: center; /* 垂直居中内容 */
}

/* 可选：给导航链接增加间距，优化视觉 */
.footer-right nav a {
  margin: 0 0.5rem;
  text-decoration: none;
  color: #333;
}

关键说明 #

• 父容器设置display: flex，让内部两个子元素横向排列
• flex:1属性确保左右区块各占页脚50%宽度，自适应不同屏幕尺寸
• 子容器内部嵌套flex布局，用justify-content和align-items直接实现内容居中，完全不需要手动调整margin或padding

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