如果在新行中，如何使元素的宽度为 100%？

Posted 2023-03-07

【中文标题】如果在新行中，如何使元素的宽度为 100%？

【英文标题】：How to make a element to have width 100% if is in a new row?

【发布时间】：2021-12-11 18:28:16

【问题描述】：

我有一个 flex 行，包含 flex-wrap 内容 一个图标 可能很大的文字 标签和按钮在行尾

目标是将Label和Button移入新行时，在行尾放置一次，cus文本太长。

真正小而复杂的问题...

   <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 w-max mt-4 items-center">        
          <IconComponent  />
        <span
          className='tracking-extratight'
        >
          text
        </span>
      </div>
    
      /* =======>>> Need this div ensure that the THIS DIV is on the right <<<============== */
      <div className="h-3 w-max mt-3 flex-1 " />
        <div
          className="flex items-center w-auto justify-end self-end ml-3 "
          onClick=onCtaClick
        >
          <span>
            ctaText
          </span>
          <CloseIcon />
        </div>
    </div>

截图：

【问题讨论】：

你试过 w-100 吗？

是的，然后重试，X 将一直在新行中。即使文字很小

【参考方案1】：

添加text-endBootstrap Text Alignment

*注意： CSS 仅用于本示例中的演示目的 *

[role="alert"] 
color:white;
font-weight:bold;
max-width:500px;
float:right;
margin-right:10px;
box-shadow:2px 2px 5px rgba(0,0,0,.5)

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

   <div
      role="alert"
      class='bg-danger rounded relative w-max shadow-bottom-lg rounded-md1 my-2 px-5 pb-4 flex items-center flex-wrap'
    >
      <div class="flex w-max mt-4 items-center">        
          <IconComponent  />
        <span
          className='tracking-extratight'
        >
         There was an issue blablablablablababla !
        </span>
      </div>
    
      
      <div class="h-3 w-max mt-3 flex-1" />
        <div
          class="flex items-center text-end justify-end self-end ml-3 "
          onClick=onCtaClick
        >
          <span>
            Retry X
          </span>
          <CloseIcon />
        </div>
    </div>

【参考方案2】：

只需将 css 属性 margin left: auto 添加到“重试”标签，您就会在框的最右侧看到标签和按钮