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

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

html 代码中，一个按钮紧挨着

标签，出现在父容器的左侧。为了让按钮浮动在父容器的右边，我们可以使用 css 的 flexbox 布局。

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

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

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

应用这些样式后，按钮将从

标签旁边移动并浮动到父容器的右边：

<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>

以上就是如何使用 flexbox 让按钮浮动在父容器的右边？的详细内容，更多请关注其它相关文章！