<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 20px; background: #f0f4f8; }
        h3 { color: #1B3A5C; }
        .flex-demo { display: flex; gap: 10px; margin: 10px 0; padding: 15px; background: #fff; border-radius: 12px; }
        .flex-demo .item { padding: 15px 25px; background: #2E86AB; color: white; border-radius: 8px; font-weight: bold; text-align: center; }
        .center-demo { justify-content: center; }
        .between-demo { justify-content: space-between; }
        .around-demo { justify-content: space-around; }
        .column-demo { flex-direction: column; align-items: center; }
        .wrap-demo { flex-wrap: wrap; }
        .wrap-demo .item { flex: 1 1 150px; }

        .perfect-center { display: flex; justify-content: center; align-items: center; height: 150px; background: #1B3A5C; border-radius: 12px; }
        .perfect-center span { color: white; font-size: 20px; font-weight: bold; }
    </style>
</head>
<body>
    <h3>justify-content: center</h3>
    <div class="flex-demo center-demo">
        <div class="item">A</div><div class="item">B</div><div class="item">C</div>
    </div>
    <h3>justify-content: space-between</h3>
    <div class="flex-demo between-demo">
        <div class="item">A</div><div class="item">B</div><div class="item">C</div>
    </div>
    <h3>flex-direction: column</h3>
    <div class="flex-demo column-demo">
        <div class="item">A</div><div class="item">B</div><div class="item">C</div>
    </div>
    <h3>Mukammal markazlashtirish</h3>
    <div class="perfect-center"><span>Flex bilan markaz!</span></div>
</body>
</html>