案例-对齐文本

对齐文本方式一

样式

注意点

• 外层使用 flex flex-col
• 内层最好不用使用 flex 将文本内容包裹起来，会失效
• 内层只有文本会更准确点
• text-align 和 text-align-last 要结合使用，并且值为 justify

示例：

.text_space {
	text-align: justify;
	text-align-last: justify;
}
<div className="flex flex-col text_space">
	<div>模糊</div>
	<div>亮度</div>
	<div>灰度</div>
	<div>透明度</div>
	<div>对比度</div>
</div>

对齐文本方式二

样式

• 文字左对齐，然后文字后面的样式按照最长文字的距离来
• 本质就是固定前面的文本的长度

示例：(使用 tailwind 语法)

<div className='flex flex-col'>
	<div className='flex items-center'>
		<div className='w-[60px]'>apple</div>
		<div>oppo</div>
	</div>
	<div className='flex items-center'>
		<div className='w-[60px]'>banane</div>
	</div>
	<div className='flex items-center'>
		<div className='w-[60px]'>gray</div>
	</div>
</div>