Layout with flexbox property - html

Question

In this layout, I want to place a circle (with fixed size) at the intersection of the column and a line on the bottom left corner of the page (which should be a no scroll page). The circle should look like this image.
I’ve started doing it with the flexbox property, however this was the first time I used this property and I am not getting how to do this.
Does anyone know how can I do it?
<div class="wrap">
<div class="hud1">
<div class="gps box"></div><!-- /gps -->
<div class="info box"></div><!-- /info -->
<div class="phone box"></div><!-- /phone -->
</div><!-- /hud1 -->
<div class="speed">
<div class="circle"></div>
</div>
<div class="hud2">
<div class="status box withfocus">
<h1>Estado</h1>
</div><!-- /status -->
<div class="media box withoutfocus">
<h1>Multimédia</h1>
</div><!-- /media -->
<div class="environment box withoutfocus">
<h1>Ambiente</h1>
</div><!-- /environment -->
<div class="settings box withoutfocus">
<h1>Definições</h1>
</div><!-- /settings -->
</div><!-- /hud2 -->
</div><!-- /wrap -->
Here’s the code:
http://jsfiddle.net/marisaroque/mR7nq/
EDIT:
Here’s the image:
Link
Thank you in advance!

Answer 1

Is it like this: http://jsfiddle.net/HUmLb/embedded/result/ ?
The key is making .hud1 a one-column flex, and in the last item inserting a .hud2 row.
I still couldn't make it center vertical, but I presume it's a good start.
Let us know.
Edit
http://jsfiddle.net/ngxyW/
I put an empty box in the lower corner and fixed the wrap div to bottom left.
This is a great reading about flex display: http://css-tricks.com/snippets/css/a-guide-to-flexbox/