CSS布局问题：如何让指定元素同行对齐且剩余元素自适应占满宽度

这问题我太熟了！要让element2和element3保持同行，同时element2自适应内容宽度、element3占满剩余空间，Flexbox绝对是最佳选择，完全不需要用绝对定位。下面直接上修改后的代码和解释：

修改后的完整代码 #

CSS部分 #

@font-face { 
  font-family: Assistant; 
  src: local("Assistant"), local("Assistant-Bold"), url(assets/Assistant.ttf); 
  font-weight: bold; 
}

:root { 
  --m-body-bg-color: teal; 
  --m-font: Assistant; 
  --m-font-fg: whitesmoke; 
  --m-main-fg: crimson; 
  --m-gaps-px: 10px; 
  --m-container-radius: 10px; 
}

/* 先确保html和body占满视口高度，避免容器高度失效 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--m-body-bg-color);
}

#page-container {
  height: 100%;
  width: calc(100% - var(--m-gaps-px) * 4);
  margin: var(--m-gaps-px);
  /* 把page-container设为flex列布局，让element1、row容器、element4垂直排列 */
  display: flex;
  flex-direction: column;
  gap: var(--m-gaps-px); /* 用gap控制垂直元素间的间距，比margin更省心 */
}

/* 新增row容器，用来包裹element2和element3，实现水平排列 */
.row-container {
  display: flex;
  gap: var(--m-gaps-px); /* 控制element2和element3之间的间距 */
  height: 100%; /* 让row容器在垂直布局里占满可用高度 */
}

.m-container {
  position: relative;
  margin: 0; /* 父容器已经用gap了，这里去掉margin避免重复间距 */
  border-radius: var(--m-container-radius);
  border: 2px solid var(--m-main-fg);
  background-color: var(--m-main-fg);
}

/* 让element2保持内容宽度，不被拉伸 */
.no-span {
  flex: 0 0 auto; /* flex属性写法：不放大、不缩小、自动宽度（等于内容宽度） */
  width: fit-content !important; /* 保留原样式也可以，flex属性优先级更高 */
}

/* 让element3占满row容器的剩余宽度 */
#element-3 {
  flex: 1; /* 等价于flex-grow:1，会自动填充剩余空间 */
}

/* 让其他容器在垂直布局里占满高度 */
#element-1, #element-4 {
  flex: 1;
}

HTML部分 #

<html lang="en-us">
<body>
  <div id="page-container">
    <div class="m-container" id="element-1"></div>
    <!-- 把element2和element3放进新的row容器里 -->
    <div class="row-container">
      <div class="m-container no-span" id="element-2">theres some content here that i want to fit</div>
      <div class="m-container" id="element-3"></div>
    </div>
    <div class="m-container" id="element-4"></div>
  </div>
</body>
</html>

关键原理说明 #

1. Flexbox布局的核心：
   • 给#page-container设置display: flex; flex-direction: column;，让内部元素垂直排列，同时用gap统一控制间距。
   • 新增的.row-container设置display: flex;，让element2和element3水平排列。
2. 元素宽度控制：
   • element2的flex: 0 0 auto保证它只占用自身内容的宽度，不会被拉伸或压缩。
   • element3的flex: 1让它自动填充.row-container里的剩余宽度，完美适配不同屏幕尺寸。
3. 高度适配：
   • 给html, body设置height: 100%，确保页面容器能占满整个视口高度。
   • 给#element-1、#element-4和.row-container设置flex: 1，让它们在垂直布局里平分可用高度（也可以根据需求调整flex值来分配不同高度比例）。

这样修改后，你就能完美实现需求：element2和element3同行，element2自适应内容，element3占剩余宽度，完全不用绝对定位！

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