點燈坊

失くすものさえない今が強くなるチャンスよ

使用 flex-row 設定 Main Axis 由左至右排列

Sam Xiao's Avatar 2021-02-23

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

Version

Tailwind CSS 2.0.1

flex-row

flex-row000

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