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

Html – Trying to resolve justify position in flex div

I have an issue which happend frequently.
here’s my code:


<div className="flex flex-col w-full mb-3">
  <div className="flex flex-row w-full">
    {
      Vege &&
        <p className="mr-1 text-sm leading-6 text-green-500">{Vege ? "VÉGÉ • " : ""}</p>
    }
  <p className="font-bold">{Titre}</p>
  <p className="justify-end">{Prix} €</p>
 </div>
 <p>{Description}</p>
</div>

I can’t manage to make the p tag including {Prix} € to be at the end of the line.
It happends to me on multiple parts of my code… Do you have any idea how to make this work?

lot of search and test, but can’t find the right thing to do.

edit:
here’s a picture of what the code gives me
And here’s what i want to achieve in this picture

Tags:

3

Answers


  1. 0

    You just need to give the element with the font-bold class the CSS property flex: 1. Provided that all others do not have flex set.

    Unfortunately, I can’t tell you which class is responsible for this in tailwind.

    Login or Signup to reply.
  2. 0

    @Andrei
    There are some solutions and you can change like this.

    <p className="font-bold flex-auto">{Titre}</p>
<p className="ml-1">{Prix} €</p>

    Good luck

    Login or Signup to reply.
  3. 0

    you can use the class flex-grow on the previous element (which translates to the CSS: flex-grow:1)

    <p className="font-bold flex-grow">{Titre}</p>
<p>{Prix} €</p>

    demo: https://livecodes.io/?x=id/d7j5axrx5sy&compiled=open (check the compiled CSS)

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

Back To Top
Search