TailwindCSS-Flex布局
比特聚客 2022-02-02 vue
# 常用flex属性
# 在没有设置flex的时候默认，块级元素是独占一行的
# 当设置成flex属性是他就会变成一个弹性的盒子，不管屏幕宽度怎么变他都会在一行
<div class="flex">
<div class="w-56 h-56 bg-red-300"></div>
<div class="w-56 h-56 bg-red-300"></div>
<div class="w-56 h-56 bg-red-300"></div>
</div>
# flex-direction
# 定义主轴方向,如图这是默认的情况下:row
<div class="flex bg-red-900 flex-row">
<div class="w-56 h-56 bg-red-300">1</div>
<div class="h-56 bg-pink-300 ">2</div>
<div class="w-56 h-56 bg-red-300 ">3</div>
</div>
# 设置成flex时可以改变主轴，变成竖向排列
# justify-content
# 比较常用的justify属性值有
- justify-center
- justify-between
- justify-around
# 代码演示
<div class="flex bg-red-900 justify-center">
<div class="w-56 h-56 bg-red-300">1</div>
<div class="h-56 bg-pink-300 w-56">2</div>
<div class="w-56 h-56 bg-red-300 ">3</div>
</div>
<div class="flex bg-red-900 justify-between">
<div class="w-56 h-56 bg-red-300">1</div>
<div class="h-56 bg-pink-300 w-56">2</div>
<div class="w-56 h-56 bg-red-300 ">3</div>
</div>
# 设置justify-around时相当于给子元素给了个左右边距
<div class="flex bg-red-900 justify-around">
<div class="w-56 h-56 bg-red-300">1</div>
<div class="h-56 bg-pink-300 w-56">2</div>
<div class="w-56 h-56 bg-red-300 ">3</div>
</div>
# flex-grow
# flex-grow属性是给子元素设置的，当子元素设置flex-grow属性时，让他占满剩余的宽度，让他变成自适应的，根据屏幕都宽度而改化
# 子元素没有设置flex-grow属性时,没有给2号盒子宽度
# 给设置2号盒子设置flex-grow时
<div class="flex bg-red-900">
<div class="w-56 h-56 bg-red-300">1</div>
<div class="h-56 bg-red-300 flex-grow">2</div>
<div class="w-56 h-56 bg-red-300 ">3</div>
</div>
# flex-shrink-0
# 属性是给子元素设置的，当子元素设置flex-shrink-0属性时，不被屏幕的宽度影响不会被缩小,只会缩小两边盒子的大小
<div class="flex bg-red-900 ">
<div class="w-56 h-56 bg-red-300">1</div>
<div class="h-56 bg-pink-300 w-80 flex-shrink-0">2</div>
<div class="w-56 h-56 bg-red-300 ">3</div>
</div>
# 用以上所学到的可以做一个响应式的效果
# 屏幕宽的时候
# 屏幕小的时候
<div class="text-center sm:text-left 3xl:flex">
<div class="text-lg font-medium">文字标题</div>
<div class="text-gray-500">文字描述文字描述文字描述</div>
</div>