I'm using tailwindcss. I have a flexbox container and a login button inside it. The button looks like it's being stretched.

<nav font-am >
      <div >

        <div>
          <img src="./img/Logo.png">
        </div>

        <div >
          <a href="#"><img src="./img/AccountLog.png"></a>
          <p >My Account</p>
        </div>

        <div >
          <a href="#"><img src="./img/love_symbol.png"></a>
          <p >My List</p>
        </div>

        <div >
          <a href="#"><img src="./img/LockLogo.png"></a>
          <button  role="button">Sign In</button>
        </div>

      </div>
    </nav>

Here is how it looks with the logo:

And the button is displayed normally when I delete the logo:

What should I do to keep the button looks normal when the logo is on. Is the logo taking up too much space or something?

CodePudding user response：

You've set your button as a stretched flex element in a flex row. You can do one of several things to fix it:

• Align the row elements to center rather than stretching them. Here, '.self-center` seems to work nicely, though you could do it at the row level also.
• Wrap the button in a div. This will make the div the stretched element, and you'll need to center the button vertically with other styles.

Both solutions are shown here.

.bg-darkPink {
  background: pink;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y lMz2Mklv18 r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1 68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<nav font-am >
  <div >
    <div >
      <a href="#"><img src="https://via.placeholder.com/80"></a>

      <button >Flex class</button>
    </div>

    <div >
      <a href="#"><img src="https://via.placeholder.com/80"></a>

      <div >
        <button >Flex div</button>
      </div>
    </div>
  </div>
</nav>

CodePudding user response：

You can give the div which is the parent of the link and the button the tailwind classes grow-0 and shrink-0 to prevent it from changing shape. Set items-center to align the lock icon vertically with the button.

CodePudding user response：

Don't let the logo disappear with display:none, do it with opacity:0