Flexbox 布局中，如何将按钮浮动至父容器右侧？

一分耕耘，一分收获！既然打开了这篇文章《Flexbox 布局中，如何将按钮浮动至父容器右侧？ 》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

如何让父容器中的按钮浮动至右侧？

问题：

当使用 Flexbox 布局，如下列代码所示时，按钮紧贴着同级元素

标签。如何调整按钮的位置，使其浮动在父容器的右侧？

<div class="container">
  <p class="item">this is test para</p>
  <button>按钮</button>
</div>

解答：

要在父容器中使按钮浮动至右侧，需要使用 justify-content 属性：

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

• justify-content: space-between 属性将子元素在横轴上均匀分布，并在父元素两端留出空白。
• display: flex 属性使 "container" 元素成为 Flexbox 容器，允许设置子元素的布局方式。

以上就是《Flexbox 布局中，如何将按钮浮动至父容器右侧？ 》的详细内容，更多关于的资料请关注golang学习网公众号！