使用Flexbox布局如何实现`div`的有效左浮动？

使用 Flexbox 布局实现 `div` 的有效左浮动比传统的 CSS float 更简单和直观。Flexbox 提供了一种高效的方式来管理容器内的项目（比如你的 `div` 元素），使其自动分布、对齐和调整大小。以下是如何通过 Flexbox 实现 `div` 左浮动的步骤：

1. 将容器设置为 flex 容器：

   .container {
     display: flex;
     /* 通常设置主轴方向为从左到右 */
     flex-direction: row;
     /* 为了消除默认的主轴留白，可以设置 justify-content: flex-start 或者 align-items: stretch */
     justify-content: flex-start;
     align-items: stretch;
   }

2. 如果你想让 `div` 占据整个容器宽度，并且只向左对齐，不需要特别设置宽度：

   .flex-item {
     flex: 1; /* 自动分配剩余空间，相当于 width: 100%; */
   }

3. 可选地，如果你想让 `div` 紧贴容器边缘，还可以设置 `margin-right` 为负值以消除边距影响：

   .flex-item {
     margin-right: -1px; /* 这里数值取决于你的需求，可能是边框宽度或其它负边距值 */
   }

通过这种方式，你的 `div` 就像在传统布局中使用 `float` 一样实现了左浮动，而且更为灵活和响应式。