在 Flexbox 上使用定位和边距？

Posted 2023-03-07

【中文标题】在 Flexbox 上使用定位和边距？

【英文标题】：Using positioning and margins on Flexboxes?

【发布时间】：2020-06-28 12:58:47

【问题描述】：

<template>
  <div class="flex justify-center">
    <div class="h-px-500 md:w-1/6 bg-orange-200 text-center">1</div>
    <div class="h-px-500 md:w-1/6 bg-orange-300 text-center">2</div>
    <div class="h-px-500 md:w-1/6 bg-orange-400 text-center">3</div>
</div>
</template>

如果我想把这个 Flexbox 放在屏幕上的某个地方.. 我该怎么做呢？例如顶部：75%？想不通。我不想使用“w-screen h-screen”，因为它阻止我在同一页面上放置许多弹性框。

【参考方案1】：

将其包装在父 div 中，并使父 div 位置绝对，然后定位。

<div class="absolute">
    <div class="flex justify-center">
        <div class="h-px-500 md:w-1/6 bg-orange-200 text-center">1</div>
        <div class="h-px-500 md:w-1/6 bg-orange-300 text-center">2</div>
        <div class="h-px-500 md:w-1/6 bg-orange-400 text-center">3</div>
    </div>
</div>