如何让flex-wrap容器内换行的label与button元素占满行宽并靠右对齐

实现方案 #

现有代码中占位用的空flex-1元素会在折行时单独占满一行，反而打乱布局，按以下规则修改即可实现需求：

• 删除占位用的空div元素
• 给「图标+文本」的外层容器添加flex-1 min-w-[60%]属性，可自行调整最小宽度阈值，作用是当行内剩余空间不足该值时，强制右侧按钮组折行
• 给文本span添加break-all属性，避免超长无间断文本撑破布局
• 右侧按钮组保留ml-auto和justify-end配置，同处一行时ml-auto会自动将按钮组推到行最右侧，折行后按钮组会自动占满整行宽度，justify-end会让内容始终对齐到行右侧

修改后的完整代码如下：

<div
  role="alert"
  className='relative ease-animation max-w-xxs sm:max-w-xs  md:max-w-sm lg:max-w-lg w-max shadow-bottom-lg rounded-md1 my-2 px-5 pb-4 flex items-center flex-wrap'
>
  <div className="flex flex-1 min-w-[60%] mt-4 items-center">        
      <IconComponent  />
    <span
      className='tracking-extratight break-all'
    >
      {text}
    </span>
  </div>

  <div
    className="flex items-center w-auto justify-end ml-3 mt-3"
    onClick={onCtaClick}
  >
    <span>
      {ctaText}
    </span>
    <CloseIcon />
  </div>
</div>

实现效果：

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