Justify Content Flex End - HTML

The justify-content: flex-end property in HTML is a part of the flexible box layout (flexbox), which allows you to align and distribute space among items inside a container.

When you set justify-content: flex-end, the flex items are aligned to the end of the container from the main axis.

Syntax

.container {
  justify-content: flex-end;
}

Example

Suppose you have three elements inside a container:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

You can use the justify-content: flex-end property to align them to the end of the container:

.container {
  display: flex;
  justify-content: flex-end;
}

Conclusion

The justify-content: flex-end property in HTML allows you to align and distribute space among items inside a container. By setting this property, you can align the flex items to the end of the container from the main axis.