CSS flex - Align items to left, and container to center - html

Question

Is it possible to use display: flex; to align all items to the left (flex-wrap: wrap; align-items: flex-start; justify-content: flex-start;) but the container it self to the center (like margin: 0 auto;)?
It seems like flex-containers are always scaled to 100% width, why the automatic margin won't work. Does anybody have an idea how to achieve what I try?
.container {
width: auto;
margin: 0 auto;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox; // IE10 uses -ms-flexbox
display: -ms-flex; // IE11
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
}
.item {
display: block;
width: 220px;
}
EDIT: Important! While the container has an auto width!

Answer 1

Yes, using text-align:center on a parent (or body) and display:inline-flex instead of display:flex.
This operates much the same as the difference between display:inline-block and display:block.
MDN says:
The element behaves like an inline element and lays out its content according to the flexbox model.
body {
background: #eee;
text-align: center;
}
.inner {
display: inline-flex;
width: auto;
/* stated but not required */
background: #ccc;
padding: 15px;
}
p {
padding: 15px;
border: 1px solid red;
}
<div class="inner">
<p>1</p>
<p>2</p>
<p>3</p>
</div>

Answer 2

For the parent, you can use display: inline-flex , which has the same effect as display: inline-block compared to display: block.
The flex won't claim the whole page width anymore.
You can find more information about flex here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/