使用 m-auto 在 Flexbox 實現不規則 Layout | 點燈坊

一般使用 Flexbox 都只會使用其相關 Property，事實上搭配 m-auto 可實現各種不規則 Layout。

Version

Tailwind CSS 2.0.3

m-auto

1 與 2 垂直置中並水平靠右，但 3 卻垂直靠下並水平靠右。

<template>
  <div class="flex h-screen">
    <div class="w-12 h-12 mx-2 my-auto">1</div>
    <div class="w-12 h-12 mx-2 my-auto">2</div>
    <div class="w-12 h-12 mr-2 ml-auto mt-auto mb-2">3</div>
  </div>
</template>

• flex：使用 Flexbox
• h-screen：設定 box 的 height 為 100vh
• w-12：設定 item 的 width
• h-12：設定 item 的 width
• mx-2：設定 1 與 2 的 horizontal margin
• my-auto：設定 1 與 2 的 vertical margin 為 auto
• mr-2：設定 3 的 right margin
• ml-auto：設定 3 的 left margin 為 auto
• mt-auto：設定 3 的 top margin 為 auto
• mb-2：設定 3 的 bottom margin

因為 1 與 2 都設定為 my-auto，故能垂直置中；而 3 的 ml-auto 為水平靠右，mt-top 為垂直靠下，因此造就了不規則 layout

<template>
  <div class="flex h-screen">
    <div class="item mx-2 my-auto">1</div>
    <div class="item mx-2 my-auto">2</div>
    <div class="item mr-2 ml-auto mt-auto mb-2">3</div>
  </div>
</template>

<style scoped>
.item {
  @apply w-12 h-12
}
</style>

10 行

.item {
  @apply w-12 h-12
}

可將各 item 相同部分抽成 item class。

Conclusion

• 由於 Flexbox 會設定 height，這使得 margin: auto 有用武之地，在使用 Flexbox 時別忘了使用 margin: auto 實現不規則 layout

Reference

Tailwind CSS, Margin