如何用CSS Flexbox实现父元素内子元素分置两侧

核心问题分析 #

你需要实现搜索栏居左、Logo居右的Header布局，但当前代码存在两个关键问题：一是HTML元素顺序导致默认排列不符合需求，二是Flex布局的对齐属性未正确配置，同时Logo标签写法不符合标准HTML规范。

修改后的完整代码 #

HTML代码

<body>
  <header>
    <div class="search-set">
      <form id="s-bar-holder" role="search">
        <input type="query" id="search-bar" name="q" placeholder="Search..." aria-label="Search the site."/>
      </form>
    </div>
    <div class="logo">
      <img src="你的Logo图片路径" alt="网站Logo"/>
    </div>
  </header>
  <main></main>
</body>

CSS代码

header {
  display: flex;
  background-color: rgb(78,78,78);
  margin: -8px -8px 0 -7px;
  height: 60px;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}

.logo {
  height: 60px;
  width: 300px;
  overflow: hidden;
}

.logo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-set {
  display: flex;
  align-items: center;
}

#search-bar {
  background-color: rgb(78,78,78);
  border: none;
  color: rgb(230,230,230);
  outline: none;
  height: 58px;
  width: 200px;
  padding: 0 8px;
}

关键修改说明 #

• 调整HTML元素顺序：将搜索栏容器放在Logo容器之前，配合Flex默认的水平排列规则，让搜索栏自然居左。
• 优化Flex布局：给header添加justify-content: space-between，使两个子元素分别贴靠左右两端；用align-items: center让所有元素垂直居中，避免高度错位。
• 修正Logo标签：将无效的<logo picture/>替换为标准<img>标签，补充src和alt属性保证可访问性。
• 清理冗余CSS：移除搜索框中无效的display: flex和justify-content: wrap属性，简化外边距写法，添加可选内边距提升视觉舒适度。

替代方案（不修改HTML顺序） #

若不想调整HTML结构，可通过order属性强制调整排列顺序：

.search-set {
  order: -1;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 保留原有其他属性 */
}

内容的提问来源于stack exchange，提问作者Ben Leevey