tailwindcss 系列 Flex Aligin Items

Aligin Items

stretch

效果

代码

<div class="flex items-stretch bg-gray-200 h-24">
      <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
        1
      </div>
      <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
        2
      </div>
      <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
        3
      </div>
 </div>

start

效果

代码

    <div class="flex items-start bg-gray-200 h-24">
      <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
        1
      </div>
      <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
        2
      </div>
      <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
        3
      </div>
    </div>

center

效果

代码

    <div class="flex items-center bg-gray-200 h-24">
      <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
        1
      </div>
      <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
        2
      </div>
      <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
        3
      </div>
    </div>

end

效果

代码

    <div class="flex items-end bg-gray-200 h-24">
      <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
        1
      </div>
      <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
        2
      </div>
      <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
        3
      </div>
    </div>

baseline

效果

代码

    <div class="flex items-baseline bg-gray-200 h-24">
      <div
        class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2 text-base"
      >
        1
      </div>
      <div
        class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2 text-2xl"
      >
        2
      </div>
      <div
        class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2 text-lg"
      >
        3
      </div>
    </div>