关于前端:tailwindcss-系列-Flex-Column

September 8, 2020 · 1 min · jiezi

Table of Contents

Flex Column Column-reversed

成果

代码实现

column

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

column-reversed

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