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
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
- See also the example: with Material UI Grid that implements the Flex system