html - 具有 flexbox 属性的布局

Question

在这个布局中，我想在列的交叉点和页面左下角的一条线(应该是一个无滚动页面)放置一个圆(固定大小)。圆圈应如下图所示。

我已经开始使用 flexbox 属性，但这是我第一次使用这个属性，我不知道如何做。

有人知道我该怎么做吗？

<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 -->

代码如下: http://jsfiddle.net/marisaroque/mR7nq/

编辑: 这是图片: Link

提前致谢!

Answer 1

是不是这样:http://jsfiddle.net/HUmLb/embedded/result/ ？

关键是使 .hud1 成为单列 flex，并在最后一项插入 .hud2 row。

我仍然无法使其居中垂直，但我认为这是一个好的开始。

让我们知道。

编辑

http://jsfiddle.net/ngxyW/

我在下 Angular 放置了一个空框，并将 wrap div 固定到左下角。

这是一本关于 flex display 的好书:http://css-tricks.com/snippets/css/a-guide-to-flexbox/