如何使用CSS Flexbox将Logo图片对齐到右侧？

要通过CSS Flexbox实现Logo右对齐，只需对.logo容器应用以下样式设置：

• 给.logo类添加display: flex;，将其转换为flex容器，内部元素自动成为flex项目
• 使用justify-content: flex-end;，让flex项目对齐到容器的右侧末端，从而将Logo推至右侧
• 添加align-items: center;，确保Logo在容器内垂直方向居中显示
• 可选设置margin-right: 20px;，为Logo右侧添加间距，避免和其他页面元素过于紧凑

修正后的完整代码 #

CSS 代码

:root {
  --color: rgb(255, 255, 255);
  --bgcolor: rgb(160, 88, 196);
  --bbg: rgb(203, 194, 210);
  --boxmbg: rgb(65, 136, 65);
  --box1bg: rgb(240, 151, 149);
  --box2bg: rgb(76, 128, 218);
}
* {
  padding: 0;
  margin: 0;
}
body {
  background-color: var(--bbg);
}
.nav ul li {
  list-style-type: none;
  padding: 10px;
  display: flex;
  color: var(--color);
}
.nav {
  position: fixed;
  width: 100%;
  top: 0px;
  margin: 0;
  padding: 0;
  z-index: 1;
}
ul {
  background-color: var(--bgcolor);
  padding: 0;
  margin: 0;
  display: flex;
}
.boxmain {
  margin-left: 10px;
  padding-left: 10px;
  border: 3px solid;
  box-shadow: 2px 2px 10px 5px rgb(224, 237, 128);
  margin: 60px;
  height: 70vh;
  background-color: var(--boxmbg);
}
.box1 {
  border: 2px solid white;
  margin: 10px;
  height: 65vh;
  width: 40%;
  background-color: var(--box1bg);
}
.box2 {
  border: 2px solid white;
  margin: 5px;
  height: 65vh;
  width: 40%;
  background-color: var(--box2bg);
  position: relative;
  left: 50%;
  top: -95.6%;
}
.box3 {
  border: 2px solid black;
  border-radius: 20px;
  margin: 5vw;
  padding: 2vh;
}
.box3 h1 {
  text-align: center;
  padding: 0;
  margin: 0;
  font-size: 30px;
}
/* 修改后的Logo样式 */
.logo {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 20px;
  /* 若需固定在右上角，可添加以下样式 */
  /* position: fixed;
  top: 10px;
  right: 0;
  z-index: 2; */
}
.logo img {
  filter: drop-shadow(2px 2px 1px red);
  width: 6vb;
}

HTML 代码

<div class="logo">
  <img
    src="https://searchmaro.in/wp-content/uploads/2024/04/Untitled-design6-1.png"
    alt="Logo"
  />
</div>
<div class="nav">
  <ul>
    <li>Home</li>
    <li>About Us</li>
    <li>Contact Us</li>
  </ul>
</div>
<div class="box">
  <div class="boxmain">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
  <div class="box3">
    <h1>Thanks For Visiting Search Maro</h1>
  </div>
</div>

注：原HTML中把导航栏和内容盒子放在.logo容器内会干扰flex布局，已将它们移出，确保.logo容器仅包含Logo元素，避免布局冲突。

内容的提问来源于stack exchange，提问作者PAWAN BISHNOI