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>