能否用Flex Box实现按钮换行时自适应拉伸且无需媒体查询？

可以通过添加一个弹性占位元素结合Flex的原生特性，实现默认状态下最后一个按钮靠右、换行时按钮自动填满容器宽度的效果，完全不需要依赖媒体查询。

实现步骤： #

1. 调整HTML结构
   在第二个按钮和第三个按钮之间添加空的占位元素，用来占据剩余空间，让最后一个按钮靠右：

   <div class="button-container">
     <button class="btn">按钮1</button>
     <button class="btn">按钮2</button>
     <div class="spacer"></div>
     <button class="btn">按钮3</button>
   </div>
   

2. 设置Flex容器样式
   开启弹性布局并允许换行，同时设置按钮间距：

   .button-container {
     display: flex;
     flex-wrap: wrap;
     gap: 1rem; /* 按钮间距可按需调整 */
   }
   

3. 配置占位元素样式
   让占位元素自动占据容器剩余空间，同时确保它能正常收缩避免布局溢出：

   .spacer {
     flex: 1 1 auto;
     min-width: 0;
   }
   

4. 定义按钮通用样式
   通过flex属性实现换行时自动填充满宽度，同时设置基础交互样式：

   .btn {
     flex: 1 1 min(180px, 100%); /* 最小宽度180px，宽屏时按比例分配，窄屏换行后占满整行 */
     padding: 0.75rem 1.5rem;
     border: none;
     border-radius: 4px;
     background-color: #2563eb;
     color: #fff;
     font-size: 1rem;
     cursor: pointer;
     transition: background-color 0.2s;
   }
   
   .btn:hover {
     background-color: #1d4ed8;
   }
   

效果说明： #

• 宽屏状态：占位元素会占据第二个按钮与第三个按钮之间的所有剩余空间，让第三个按钮自动靠右，前两个按钮保持自身内容宽度。
• 窄屏换行状态：当容器宽度不足以容纳所有元素在一行时，占位元素会被挤到新行，此时每个按钮的flex属性会自动让它们填满当前行的宽度。

这种方案完全基于Flex原生特性，不依赖任何像素阈值的媒体查询，布局会根据容器宽度自动适配。

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