tailwindcss 系列 Flex Aligin Content

aligin content

start

效果

代码

    <div class="flex content-start flex-wrap bg-gray-200 h-48">
      <div class="w-1/3 p-2">
        <div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
      </div>
      <div class="w-1/3 p-2">
        <div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
      </div>
      <div class="w-1/3 p-2">
        <div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
      </div>
      <div class="w-1/3 p-2">
        <div class="text-gray-700 text-center bg-gray-400 p-2">4</div>
      </div>
      <div class="w-1/3 p-2">
        <div class="text-gray-700 text-center bg-gray-400 p-2">5</div>
      </div>
    </div>

center

效果

代码

   <div class="flex content-center flex-wrap bg-gray-200 h-48">
      <div class="w-1/3 p-2">
        <div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
      </div>
      <div class="w-1/3 p-2">
        <div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
      </div>
      <div class="w-1/3 p-2">
        <div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
      </div>
      <div class="w-1/3 p-2">
        <div class="text-gray-700 text-center bg-gray-400 p-2">4</div>
      </div>
      <div class="w-1/3 p-2">
        <div class="text-gray-700 text-center bg-gray-400 p-2">5</div>
      </div>
    </div>

end

效果

代码

   <div class="flex content-end flex-wrap bg-gray-200 h-48">
      <div class="w-1/3 p-2">
        <div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
      </div>
      <div class="w-1/3 p-2">
        <div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
      </div>
      <div class="w-1/3 p-2">
        <div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
      </div>
      <div class="w-1/3 p-2">
        <div class="text-gray-700 text-center bg-gray-400 p-2">4</div>
      </div>
      <div class="w-1/3 p-2">
        <div class="text-gray-700 text-center bg-gray-400 p-2">5</div>
      </div>
    </div>

space-between

效果

代码

    <div class="flex content-between flex-wrap bg-gray-200 h-48">
      <div class="w-1/3 p-2">
        <div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
      </div>
      <div class="w-1/3 p-2">
        <div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
      </div>
      <div class="w-1/3 p-2">
        <div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
      </div>
      <div class="w-1/3 p-2">
        <div class="text-gray-700 text-center bg-gray-400 p-2">4</div>
      </div>
      <div class="w-1/3 p-2">
        <div class="text-gray-700 text-center bg-gray-400 p-2">5</div>
      </div>
    </div>

space-around

效果

代码

    <div class="flex content-around flex-wrap bg-gray-200 h-48">
      <div class="w-1/3 p-2">
        <div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
      </div>
      <div class="w-1/3 p-2">
        <div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
      </div>
      <div class="w-1/3 p-2">
        <div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
      </div>
      <div class="w-1/3 p-2">
        <div class="text-gray-700 text-center bg-gray-400 p-2">4</div>
      </div>
      <div class="w-1/3 p-2">
        <div class="text-gray-700 text-center bg-gray-400 p-2">5</div>
      </div>
    </div>