如何有序添加新Chip并实现添加按钮随动移位？

没问题，我来给你捋捋实现这个效果的思路，以及提供个简单的参考示例框架：

• 容器布局选型：优先用Flexbox作为Chip和按钮的容器，设置display: flex + flex-wrap: wrap + align-items: center，这样新添加的Chip会自动紧跟在前一个元素后方，超出容器宽度时自动换行，保证整体排列整齐。用gap属性统一控制Chip和按钮之间的间距，比单独设置margin更省心。
• 按钮位置锁死：把添加按钮放在Flex容器内，且始终作为容器的最后一个元素。每次新增Chip时，都将Chip插入到按钮的前一个位置，这样按钮就会自动“贴”在最后一个Chip的正前方，不用手动计算位置。
• 动态插入逻辑：点击按钮时，创建新的Chip DOM元素，通过insertBefore方法将其插入到按钮节点之前，就能保证按钮永远处于最后一个Chip的紧前方位置。

这里用HTML+CSS+JS做一个最简实现：

<!-- 外层容器 -->
<div class="chip-wrapper">
  <!-- 初始标签（可选） -->
  <span class="chip">美食</span>
  <!-- 添加按钮 -->
  <button id="add-chip">+ 新增标签</button>
</div>

.chip-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px; /* 统一控制元素间距 */
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  width: 400px;
}

.chip {
  background-color: #f3f4f6;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px;
}

#add-chip {
  padding: 4px 12px;
  border: 1px solid #3b82f6;
  background: white;
  border-radius: 20px;
  color: #3b82f6;
  cursor: pointer;
  font-size: 14px;
}

const addBtn = document.getElementById('add-chip');
const wrapper = document.querySelector('.chip-wrapper');

addBtn.addEventListener('click', () => {
  // 创建新的Chip元素
  const newChip = document.createElement('span');
  newChip.className = 'chip';
  const chipCount = document.querySelectorAll('.chip').length;
  newChip.textContent = `标签${chipCount + 1}`;
  
  // 插入到添加按钮的前面
  wrapper.insertBefore(newChip, addBtn);
});

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