如何用flex布局-横向竖向排列

2024-09-21

注意，这里的flex布局用的是tailwindcss的flex类，而不是css的flex属性。道理是一样的，只是写法不同。

横向排列

从左到右排列：flex flex-row

实践下来，发现flex flex-row是默认的，不用写也可以。

<div class="flex flex-row">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

从右到左排列：flex flex-row-reverse

<div class="flex flex-row-reverse">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

居中排列：flex justify-center

<div class="flex justify-center">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

两端对齐：flex justify-between

<div class="flex justify-between">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

竖直排列

从上到下排列：flex flex-col

<div class="flex flex-col">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

从下到上排列：flex flex-col-reverse

<div class="flex flex-col-reverse">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

自动扩展大小：flex-1

 <div class='flex'>
    <div class='flex-1'>01</div>
    <div class='flex-1'>02</div>
    <div class='flex-1'>03</div>
 </div>

参考链接

https://tailwindcss.com/docs/flex-direction https://tailwindcss.com/docs/flex#flex-1