关于前端: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>