如何用Flex或其他CSS属性实现元素内容换行并对齐容器左侧？

需求说明 #

希望实现这样的布局效果：容器内第一个元素（红色文字"hi"）靠左排列，第二个元素的长文本第一行与第一个元素同行，换行后的内容直接对齐容器最左侧，而非在第一个元素下方缩进。

原始代码示例 #

<html>
  <style>
    .container {display: flex}
    .item1 {color: red}
    .item2 {float: left}
  </style>
  <body>
    <div class="container">
      <div class="item1"> hi</div>
      <div class="item2"> hello this is a long line that should break to the next lineeeee. </div>
    </div>
  </body>
</html>

一、使用Flex布局实现 #

可以通过Flex布局实现，核心是利用弹性属性控制元素换行后的排列：

<html>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap; /* 允许元素换行 */
    }
    .item1 {
      color: red;
      flex-shrink: 0; /* 防止第一个元素被压缩，保持自身宽度 */
      margin-right: 8px; /* 两个元素间的间距 */
    }
    .item2 {
      flex: 1; /* 让第二个元素占据容器剩余空间 */
      min-width: 0; /* 避免内容溢出时不换行 */
    }
  </style>
  <body>
    <div class="container">
      <div class="item1"> hi</div>
      <div class="item2"> hello this is a long line that should break to the next lineeeee. </div>
    </div>
  </body>
</html>

原理：flex-wrap: wrap开启换行机制，flex-shrink: 0固定第一个元素的宽度，flex:1让第二个元素填充容器剩余空间；当内容长度超过剩余空间时，自动换行并占满整行，实现换行内容对齐容器左边缘。

二、使用其他CSS属性实现 #

方法1：浮动（Float）+ BFC #

利用浮动和块级格式化上下文（BFC）实现：

<html>
  <style>
    .container {
      overflow: hidden; /* 清除浮动对父容器的高度影响 */
    }
    .item1 {
      color: red;
      float: left;
      margin-right: 8px;
    }
    .item2 {
      overflow: hidden; /* 触发BFC，让元素占据剩余空间 */
    }
  </style>
  <body>
    <div class="container">
      <div class="item1"> hi</div>
      <div class="item2"> hello this is a long line that should break to the next lineeeee. </div>
    </div>
  </body>
</html>

原理：第一个元素浮动靠左，第二个元素通过overflow: hidden触发BFC，不受浮动元素的布局影响，自动填充剩余空间，换行内容直接对齐容器左边缘。

方法2：CSS Grid布局 #

通过Grid的列跨越和间距控制实现：

<html>
  <style>
    .container {
      display: grid;
      grid-template-columns: auto 1fr; /* 定义两列，第一列自适应宽度 */
      align-items: start;
    }
    .item1 {
      color: red;
      margin-right: 8px;
    }
    .item2 {
      grid-column: 1 / -1; /* 让第二个元素横跨所有列 */
      margin-left: calc(1em + 8px); /* 偏移量匹配第一个元素宽度+间距，保证第一行对齐 */
    }
  </style>
  <body>
    <div class="container">
      <div class="item1"> hi</div>
      <div class="item2"> hello this is a long line that should break to the next lineeeee. </div>
    </div>
  </body>
</html>

原理：先让两个元素在同一行的两列排列，再让第二个元素跨越所有列；通过margin-left保证第一行与第一个元素对齐，后续换行内容自动对齐容器左边缘。

方法3：inline-block + 宽度计算 #

利用行内块元素的特性和宽度计算实现：

<html>
  <style>
    .container {
      width: 100%;
    }
    .item1 {
      color: red;
      display: inline-block;
      margin-right: 8px;
    }
    .item2 {
      display: inline-block;
      width: calc(100% - 1em - 8px); /* 计算剩余可用宽度 */
      vertical-align: top; /* 对齐元素顶部 */
    }
  </style>
  <body>
    <div class="container">
      <div class="item1"> hi</div>
      <div class="item2"> hello this is a long line that should break to the next lineeeee. </div>
    </div>
  </body>
</html>

原理：将两个元素设为inline-block，通过calc计算第二个元素的宽度，使其填充剩余空间，换行后自然对齐容器左边缘。

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