CSS Flex - Align (Left, Right, Center)

Css Flex Align Content

About

How to align CSS flex box.

This is the flex part of the horizontal positioning article.

Example

Center

.container {
   display: flex;
   justify-content: center;
   align-items: center;
}
.child {
   border: 1px solid aqua;
}
<div class="container">
   <div class="child">Am I ...?</div>
</div>

See also the justify-content article for more values such as left are right

.container {
   display: flex;
}
.right {
   margin-left: auto!important;
   border: 1px solid aqua;
}
<div class="container">
   <div class="right">Am I right ?</div>
</div>

You can also get box at the right side with justify-content

Documentation / Reference





Discover More
How to align horizontally at the center and right position with CSS ?

This page shows you how to arrange horizontally CSS elements. See See justify-content articleleftright In case of absolute positioning: where: left:50%: the block starts at 50% left...



Share this page:
Follow us:
Task Runner