在 Flexbox 上使用定位和边距？答案

【问题标题】：Using positioning and margins on Flexboxes?在 Flexbox 上使用定位和边距？
【发布时间】：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”，因为它阻止我在同一页面上放置许多弹性框。

【问题讨论】：

标签： html css vue.js tailwind-css

【解决方案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>

【讨论】：