What is the flexbox way to center these elements?

I want the three flex elements to take full width and to be centered in their cell.

.container { background-color: yellow; width: 100%; display: flex; }
.item { flex: 1; }
.a {  background-color: green; }
.b { background-color: blue; }
.c { background-color: red; }

<div class="container">
    <div class="a item"><div>a</div></div>
    <div class="b item"><div>b</div></div>
    <div class="c item"><div>c</div></div>
</div>

It works if we add .item { text-align: center; }.

But what is the 100% flexbox way to do this using flexbox techniques, and without other techniques like text-align: center;?

I tried justify-items: center, justify-content: center, align-items: center like in Flexbox: center horizontally and vertically without success.