如何将flex元素对齐至logo左侧与链接右侧的区域？

核心思路是通过统一的居中容器约束header与下方内容的宽度，让两者左右边界对齐，无需依赖固定padding，同时保证不同屏幕尺寸下布局一致。

修改步骤 #

• 添加一个居中容器（.container），包裹header和flex内容，通过max-width和margin: 0 auto实现自适应居中，小屏幕下可保留左右内边距避免内容贴边。
• 将header的justify-content: space-around替换为space-between，让LOGO和链接列表紧贴容器左右边界，与下方内容边界完全对齐。

修改后的代码 #

CSS 代码 #

body {
  padding: 0;
  margin: 0;
}

.section-one {
  background-color: blue;
  color: white;
  padding: 50px 0;
}

/* 新增居中容器 */
.container {
  max-width: 1200px; /* 可根据需求调整最大宽度 */
  margin: 0 auto;
  padding: 0 20px; /* 小屏幕下左右留边，可选 */
}

.header {
  display: flex;
  justify-content: space-between; /* 替换space-around，让元素贴容器边界 */
  padding: 0 0 50px 0;
}

ul {
  display: flex;
  gap: 1rem;
  margin: 0;
  list-style: none;
}

.flex {
  display: flex;
  gap: 20px;
}

.column,
.placeholder-image {
  flex: 1;
  flex-direction: column;
  border: 5px solid;
}

HTML 代码 #

<section class="section-one">
  <!-- 用container包裹header和flex内容 -->
  <div class="container">
    <div class="header">
      <div class="logo left">LOGO</div>
      <div class="right">
        <ul>
          <li><a href=""></a>link one</li>
          <li><a href=""></a>link two</li>
          <li><a href=""></a>link three</li>
        </ul>
      </div>
    </div>
    <div class="flex">
      <div class="column">
        <div>
          <h1>This website is awesome</h1>
        </div>
        <div>
          <p class="quote">Lorem ipsum, dolor sit amet elit. Laboriosam, eum blanditiis porro ad animi aliquam, quisquam dolore nisi eaque sit explicabo laborum voluptatibus.</p>
        </div>
        <div><button class="sign-up">sign up</button></div>
      </div>
      <div class="placeholder-image">This is a place holder for an image</div>
    </div>
  </div>
</section>

原理说明 #

• .container的max-width限制内容最大宽度，margin: 0 auto让容器在宽屏时居中、窄屏时撑满，padding: 0 20px避免小屏幕内容贴边。
• header使用space-between后，LOGO和链接列表分别紧贴容器左右边缘，下方flex容器在同一容器内，自然与header边界对齐，实现你需要的“两条黑线之间”的布局。
• 该方式完全依赖容器自适应特性，无需硬编码padding，在所有屏幕尺寸下都能保持布局一致性。

内容的提问来源于stack exchange，提问作者Cornelis Etta