The justify-content property in CSS is used within a flex container to align and distribute space among flex items along the main axis (which is horizontal by default). Here’s a breakdown of the values you can use with justify-content:
flex-start: Aligns items to the start of the flex container (default value). Items are packed towards the beginning of the flex container.
flex-end: Aligns items to the end of the flex container. Items are packed towards the end of the flex container.
center: Centers items within the flex container. All items are distributed equally with space on either side.
space-between: Distributes items evenly in the container, with the first item at the start and the last item at the end. The space between items is equal, but there is no space before the first item and after the last item.
space-around: Distributes items with equal space around them. The space before the first item and after the last item is half the space between items.
space-evenly: Distributes items with equal space between them and around them. The space between and around items is the same.
start: Aligns items to the start of the flex container in the context of the writing mode.
end: Aligns items to the end of the flex container in the context of the writing mode.
left: Aligns items to the left edge of the container (works similar to flex-start in left-to-right contexts).
right: Aligns items to the right edge of the container (works similar to flex-end in left-to-right contexts).
Display Flex Alignment Replica of Float Left and Float Right
<!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{
display: flex;
align-items: center;
justify-content: space-between;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>
</body>
</html>
