css 是否将Flexbox项目居中显示在页面的任意一侧？

iyfamqjs 于 2023-02-06 发布在其他

关注(0)|答案(1)|浏览(132)

Footer for restaurant page
对于我的项目，我重新创建了这个基本的餐厅主页，我只剩下页脚部分，在我的课程中，我们只知道最基本的css和flexbox，所以我想保留我在这方面的解决方案，但我现在的想法是将页脚一分为二，然后使用justify-content：将“加入我们的邮件列表！”放在页脚的左半部分，将导航链接放在页脚的右半部分。这可能吗？
我试过使用宽度，使用左页脚和右页脚的div，在两者上使用显示flex，使用边距和填充手动将一边推到另一边，但它从来没有正确地排列。

css

来源：https://stackoverflow.com/questions/75328305/center-flexbox-items-on-either-side-of-the-page

1条答案

按热度按时间

lb3vh1jj1#

使用嵌套的弹性框。
1.一个在footer上，因此您可以使用justify-content: space-between;将其内容左右分隔

nav上的另一个，因此您可以使用gap: 1em;指定菜单项之间的间距。
就像这样：

footer {
  display: flex;
  justify-content: space-between;
  background: cyan;
  padding: 1em;
}

nav {
  display: flex;
  gap: 1em;
}

<footer>
  <div>
    <input placeholder="email address">
    <button>Sign Up</button>
  </div>
  <nav>
    <a href="">Menu1</a>
    <a href="">Menu2</a>
    <a href="">Menu3</a>
  </nav>
</footer>

赞(0）回复(0）举报 2023-02-06

我来回答

css 是否将Flexbox项目居中显示在页面的任意一侧？

1条答案

相关问题

热门标签

最新问答