如何使用 flexbox 让按钮浮动在父容器的右边？

哈喽！今天心血来潮给大家带来了《如何使用 flexbox 让按钮浮动在父容器的右边？》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

css 定位之让按钮浮动在父容器的右边

html 代码中，一个按钮紧挨着 <p> 标签，出现在父容器的左侧。为了让按钮浮动在父容器的右边，我们可以使用 css 的 flexbox 布局。

在 css 文件中，添加以下代码：

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

• justify-content 属性指定项目在主轴方向上的对齐方式。space-between 值将项目均匀分布在容器剩余的空间内，最后一个项目靠近右边缘。
• display 属性将容器设置为 flexbox 容器。

应用这些样式后，按钮将从 <p> 标签旁边移动并浮动到父容器的右边：

<style>
  .container {
    flex-wrap: wrap;
    background-color: azure;
    width: 300px;
  }

  .item {
    width: 150px;
    height: 50px;
    background-color: antiquewhite;
    border: 1px solid black;
    display: inline-block;
  }

  .container {
    justify-content: space-between;
    display: flex;
  }
</style>

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~