关于前端:tailwindcss-系列-Flex-Justify-Content

Justify Content

start

成果

代码

 <div class="flex justify-start 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>

center

成果

代码

 <div class="flex justify-center 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>

end

成果

代码

 <div class="flex justify-end 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>

space-between

成果

代码

 <div class="flex justify-between 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>

space-around

成果

代码

 <div class="flex justify-around 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>

space-evenly

成果

代码

 <div class="flex justify-evenly 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>