flex布局：元素两侧对齐

最新推荐文章于 2024-08-29 08:25:28 发布

诚诚程程成

最新推荐文章于 2024-08-29 08:25:28 发布

阅读量1.6k

点赞数 1

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_52268321/article/details/129311399

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

文章介绍了如何通过在.top-header中设置display:flex和justify-content:space-between，实现元素在两侧分布的效果。这种方法适用于需要左右对齐的布局设计，同时提醒注意父级元素不应为display:flex。

摘要由CSDN通过智能技术生成

如何实现如下图效果，让元素在两侧分布？

在这里插入图片描述

template代码如下，

<template>
  <div class="top-header">
      <div class="header-left" style="display:inline">left</div>
      <div class="header-right" style="display:inline">right</div>
  </div>
</template>

给 top-header 设置如下即可

.top-header{
    /* border-block-end: 1px solid black;       */
    background-color: #99CCFF;
    height: 65px;
    display: flex;
    justify-content: space-between;
  }