CODEWITHSUNDEEP
htmlcssflexbox
marisaroque
marisaroque

Reputation: 84

Layout with flexbox property

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!

Upvotes: 0

Views: 135

Answers (1)

Niloct
Niloct

Reputation: 10015

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/

Upvotes: 1

Related Questions