使用 flex-row 設定 Main Axis 由左至右排列 | 點燈坊

Flexbox 雖然看起來使 Block 從垂直排列變成水平排列，事實上是由 flex-row 決定 Main Axis 排列方向。

Version

Tailwind CSS 2.0.1

flex-row

Item 在 Flexbox 內水平由左至右排列，且 main axis 為 row。

<template>
  <div class="flex flex-row w-full h-96">
    <div class="w-20 h-20 m-2">1</div>
    <div class="w-20 h-20 m-2">2</div>
    <div class="w-20 h-20 m-2">3</div>
  </div>
</template>

第 2 行

<div class="flex flex-row w-full h-96">

使用 flex-row 設定 Flexbox 的 main axis 為 row 且由左至右。

Conclusion

• Flexbox 預設就是 flex-grow，實務上可省略不寫

Reference

Tailwind CSS, flex-row