Two ways to justify the flex items along the center

08 May 2020

One day, I have a requirement. I need to keep 2,3,4 to be fixed and 1,5 to be responsive. I found two ways to do this:

Use flex box with justify center:

<section class="flex flex-row w-full justify-center">
  <div class="mr-16 relative flex flex-col w-32 border">
    <h1 class="font-bold text-3xl">Title 1</h1>
    <p class="text-xl pt-10">
      description 1
    </p>
  </div>
  <div class="ml-16 relative flex flex-col w-32 border">
    <h1 class="font-bold text-3xl">Title 2</h1>
    <p class="text-xl pt-10">
      description 2
    </p>
  </div>
</section>

Use flex box with float:

<section class="flex flex-row w-full">
  <div class="w-1/2 pr-16 relative">
    <div class="felx flex-col w-32 border float-right">
      <h1 class="font-bold text-3xl">Title 1</h1>
      <p class="text-xl pt-10">
        description 1
      </p>
    </div>
  </div>
  <div class="w-1/2 pl-16 relative flex flex-col ">
    <div class="flex flex-col w-32 border float-left">
      <h1 class="font-bold text-3xl">Title 2</h1>
      <p class="text-xl pt-10">
        description 2
      </p>
    </div>
  </div>
</section>

Both can get same results.

Back to top