動態

詳情 返回 返回

tailwindcss 系列 Flex Aligin Content - 動態 詳情

aligin content

start

效果
image.png
代碼


    <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

效果
image.png
代碼

   <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

效果
image.png
代碼

   <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

效果
image.png

代碼

    <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

效果
image.png
代碼

    <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>
css框架 , 前端 , flexbox
點贊

Add a new 評論

Some HTML is okay.