Question 44613 in Html Question posted in
Some basic documentation can be found here.

How to wrap a nested flexbox at a certain viewport using TailwindCSS? – Html

I have the following which uses TailwindCSS:

<div class="box-border flex w-auto flex-row gap-2 rounded-2xl border p-4 my-4 mx-4">
  <div class="grow-0">
    <div class="flex h-full flex-col items-center justify-center">
      <div class="ml-50%">icon</div>
    </div>
  </div>
  <div className="grow">
    <div class="flex flex-col">
      <div>
        <h2>Title</h2>
        <p>Subtitle - Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
      </div>
    </div>
  </div>
  <!-- I want the following to wrap onto its own line at a certain viewport -->
  <div class="grow">
    <div class="flex h-full items-center justify-end">
      <button class="w-32 rounded-full bg-green-100">Start action</button>
    </div>
  </div>
</div>

I want the "Start action" flexbox area to wrap onto its own line at a certain viewport (e.g. mobile) whilst keeping the layout of the icon and title/subtitle the same. However the flex grow styling seems to stop flex wrap from working when I’ve tried implementing it.

Does anyone have any suggestions? It’s likely an easy fix but it’s not obvious to me currently!

You can see an example of this in a Tailwind playground here: https://play.tailwindcss.com/l2E7okOqOV

Tags:

2

Answers


  1. 0

    You can wrap the icon and title/subtitle part in its own separate div, as a sibling to the button part, then use justify-between in the parent container.

    This will add a space between the icon/title/subtitle and the button, so the former will stay to the left and the latter to the right when there is enough space. When there isn’t enough space, the button part will wrap to the second line.

    <div class="box-border flex justify-between w-auto flex-wrap gap-2 rounded-2xl border p-4 my-4 mx-4">
  <div>
    <div class="grow-0">
    <div class="flex h-full flex-col items-center justify-center">
      <div class="ml-50%">icon</div>
    </div>
  </div>
  <div className="grow">
    <div class="flex flex-col">
      <div>
        <h2>Title</h2>
        <p>Subtitle - Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
      </div>
    </div>
  </div>
  </div>
  <!-- I want the following to wrap onto its own line at a certain viewport -->
  <div>
    <div class="flex h-full items-center justify-end">
      <button class="w-32 rounded-full bg-green-100">Start action</button>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Let me know if this is what you are looking for, if not please elaborate more.

    
<div class="box-border flex w-auto flex-row gap-2 rounded-2xl border p-4 my-4 mx-4">
  <div class="grow-0">
    <div class="flex h-full flex-col items-center justify-center">
      <div class="ml-50%">icon</div>
    </div>
  </div>
  <div class="grow">
    <div class="flex flex-col">
      <div>
        <h2>Title</h2>
        <p>Subtitle - Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
      </div>
    </div>
  </div>
  <div class="">
    <div class="flex h-full items-center justify-end">
      <button class="rounded-full flex flex-wrap bg-green-100 px-4">Start action</button>
    </div>
  </div>
</div>

    The reason here is that setting a hard width won’t make anything wrap.

    If you mean to wrap only the last flexbox item, it can be done like this:

    <!-- only last item will wrap -->
<div class="box-border flex w-auto flex-row flex-wrap gap-2 rounded-2xl border p-4 my-4 mx-4">
  <div class="shrink">
    <div class="flex h-full flex-row items-center justify-center">
      <div class="ml-50%">icon</div>
      <div class="flex flex-col">
      <div>
        <h2>Title</h2>
        <p>Subtitle - Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
      </div>
    </div>
    </div>
  </div>
  <div class="shrink">
    
  </div>
  <div class="">
    <div class="flex h-full items-center justify-end">
      <button class="rounded-full w-32 bg-green-100 px-4">Start action</button>
    </div>
  </div>
</div>

    But I see you have a lot of nesting wrappers and margins this does not work that well when you are using flex-box. I would try to simplify this and use flex align and justify instead of margins.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search