Использование позиционирования и полей на Flexboxes?

Question

<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 где-нибудь на экране ... Как я могу go об этом? Например, топ: 75%? Не могу понять это. Я не хочу использовать «w-screen h-screen», так как он мешает мне разместить много flexbox на одной странице.

Answer 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>