TV remote control layout with flexbox - html

Question

I'm trying to design a TV remote control using flexbox (I would use Grid but it is not supported by webkit).
I'm struggling to align/center the items around the "OK" item.
I was thinking to create an "invisible" item but I can't find any such thing on the flexbox specs (empty space seems to be ignored).
I feel that defining "margins" is not exactly the right way to do this.
It should look as below
Up
|
<left----OK---Right-->
|
Down
But it looks like more like this
Up
|
<left----OK---Right-->
|
Down
Here you can play it.
.grid {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.up {
order: 1;
margin-left: 40%;
margin-right: 50%;
}
.left {
order: 2;
margin-left: 30%;
}
.ok {
order: 3;
}
.right {
order: 4;
margin-right: 40%;
}
.down {
order: 5;
margin-left: 40%;
}
<div class="grid">
<form action="/keyboard/" class="up">
<input type="hidden" name="q" value="126" />
<button type submit class="button-large">Up </button>
</form>
<form action="/keyboard/" class="left">
<input type="hidden" name="q" value="123" />
<button type submit class="button-large">Left</button>
</form>
<form action="/keyboard/" class="ok">
<input type="hidden" name="q" value="36" />
<button type submit class="button-large">OK</button>
</form>
<form action="/keyboard/" class="right">
<input type="hidden" name="q" value="124" />
<button type submit class="button-large">Right</button>
</form>
<form action="/keyboard/" class="down">
<input type="hidden" name="q" value="125" />
<button type submit class="button-large">Down;</button>
</form>
</div>

Answer 1

It's actually not too complicated. Just need some adjustments to your CSS. No changes necessary to your HTML.
.grid {
display: inline-flex; /* 1 */
flex-flow: row wrap;
}
.up, .down {
flex: 0 0 100%; /* 2 */
text-align: center; /* 2 */
}
.left, .right {
flex: 1 0 1%; /* 3 */
display: flex;
}
.left { justify-content: flex-end; }
.right { justify-content: flex-start; }
.ok {}
<div class="grid">
<form action="/keyboard/" class="up">
<input type="hidden" name="q" value="126" />
<button type submit class="button-large">Up </button>
</form>
<form action="/keyboard/" class="left">
<input type="hidden" name="q" value="123" />
<button type submit class="button-large">Left</button>
</form>
<form action="/keyboard/" class="ok">
<input type="hidden" name="q" value="36" />
<button type submit class="button-large">OK</button>
</form>
<form action="/keyboard/" class="right">
<input type="hidden" name="q" value="124" />
<button type submit class="button-large">Right</button>
</form>
<form action="/keyboard/" class="down">
<input type="hidden" name="q" value="125" />
<button type submit class="button-large">Down</button>
</form>
</div>
jsFiddle
Notes:
Size container to content size (not width: 100%).
Occupy all space in the row, then center inline content.
Consume all free space in the row (does not apply to "OK", which takes content width only). The flex-basis: 1% is solely for Safari, which doesn't otherwise break .left to the second row as it should.