Home Using CSS Flex property to center one element and align the other element to the left or right

Questions

Using CSS Flex property to center one element and align the other element to the left or right

February 10, 2024

to center one of the two elements inside an element with CSS flex property and align the other to the left or right, what approach should I take?

When I ask ChatGPT, it gives the margin-left and margin-right properties to auto for the element that will be aligned to the right. But this doesn’t work.

>Solution :

You can utilize the CSS position property to meet your desired layout.
Please check below example.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example</title>
<style>
    .container {
        position: relative;
        display: flex;
        justify-content: center;
        border: 1px solid black;
        padding: 10px;
    }
    
    .centered-item {
        /* No specific styling for centered item */
    }

    .right-aligned-item {
        position: absolute;
        right: 10px; /* Adjust this value as needed */
    }
</style>
</head>
<body>

<div class="container">
    <div class="centered-item">
        Centered Item
    </div>
    <div class="right-aligned-item">
        Right Aligned Item
    </div>
</div>

</body>
</html>

Hope it helps.