CSS Flex - Align (Left, Right, Center)

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


Powered by ComboStrap