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

How to align content in a flex box using Tailwind – Html

I am working with flex in Tailwind CSS and I have content that’s not being aligned correctly.

    <div class="flex flex-col space-y-4 p-2 w-full">
       <div class="flex space-x-2">
          <p class="w-1/4 text-sm"> python </p>
          <div class="h-4 w-1/2 rounded-md mt-1 bg-green-400" style="width: 65%;"></div>
          <p class="w-1/4 text-sm"> 65 </p>
       </div>
       <div class="flex space-x-2">
          <p class="w-1/4 text-sm"> html </p>
          <div class="h-4 w-1/2 rounded-md mt-1 bg-green-400" style="width: 100%;"></div>
          <p class="w-1/4 text-sm"> 100 </p>
       </div>
    </div>

The HTML is rending like this:

enter image description here

As you see in the graph, the first green line aligns in the center, but I want it to align to the left.

I tried many ways, adding justify-start, center-start, etc., but nothing has worked.

Tags:

2

Answers


  1. 0

    with css you can apply at your field

    .left {
  display: flex;
  margin-right: auto;
  margin-left: 0;
}
    Login or Signup to reply.
  2. 0

    I would just wrap the bar and the value in another flex to keep them together. For example:

      <div class="flex w-full space-x-2">
    <p class="basis-1/4 text-sm">python</p>
    <div class="basis-3/4 flex items-center space-x-2">
      <div class="h-4 rounded-md bg-green-400" style="width: 65%;"></div>
      <div class="flex-1 text-sm">65</div>
    </div>
  </div>

    The flex-1 on the value will eat up the rest of the space on that row so that the value sticks to the end of the bar.

    Working example here: https://play.tailwindcss.com/M9xW90axaY

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

Back To Top
Search