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 布局中，如何将按钮浮动至父容器右侧？的详细内容，更多请关注其它相关文章！