CODEWITHSUNDEEP
htmlcssflexbox
harryg
harryg

Reputation: 24077

Flexbox - different alignment for two elements

I have the following markup:

.content {
  display: flex;
}
<div class="content">
  <div class="contact">[email protected]</div>

  <div class="branding">
    <h1>Name</h1>
    <img src="http://lorempixel.com/200/200" />
  </div>

</div>

I essentially want the contact div to appear top-right of the window and the branding div to be centered on the remaining space on the page; i.e. I don't want the branding div to overlap the contact div at any point.

How would I achieve this with flexbox?

Update: here is an example of the desired layout: enter image description here

Upvotes: 4

Views: 4036

Answers (3)

Michael Benjamin
Michael Benjamin

Reputation: 371003

I essentially want the contact div to appear top-right of the window and the branding div to be centered on the remaining space on the page; i.e. I don't want the branding div to overlap the contact div at any point.

CSS

html, body { height: 100%; } /* enable percentage height for flex container */

.content {
    display: flex;
    flex-direction: column;
    height: 100%; /* give the flex container a height */
}

.contact {
    align-self: flex-end; /* align-right */
}

.branding {
    margin: auto; /* center branding div in container */
}

DEMO

With the code above, the contact div appears top-right of the window, the branding div is centered on the page, and there is no overlap at any time.

Upvotes: 5

TylerH
TylerH

Reputation: 21100

Here's one way to do it, though I think it will be better once CSS Grid Layouts gets better support.

The lightgrey background is just to show that the branding div is in fact taking up the rest of the space. As you can see, there's no overlap.

.content {
    display: flex;
    flex-direction: row-reverse;
}

.branding {
    width: 100%;
    background: lightgrey;
    text-align: center;
}
<div class="content">
    <div class="contact">[email protected]</div>
    <div class="branding">
        <h1>Name</h1>
        <img src="http://lorempixel.com/200/200" />
    </div>
</div>

Here's an external JSFiddle, too.

Upvotes: 1

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

You can do this:

COLUMNS

CSS

.content {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row-reverse nowrap;
    flex-flow: row-reverse nowrap;
}
div {
    -webkit-flex: none;
    flex: none;
}
.branding {
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
    align-items:center;
    text-align:center;
}

HTML

<div class="content">
    <div class="contact">[email protected]</div>
    <div class="branding">
         <h1>Name</h1>

        <img src="http://lorempixel.com/200/200" />
    </div>
</div>

DEMO HERE

ROWS

CSS

.content {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column nowrap;
    flex-flow: column nowrap;
}
div {
    -webkit-flex: none;
    flex: none;
}
.contact {   
    text-align:right;
}


.branding {
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
    align-items:center;
    text-align:center;
}

HTML

<div class="content">
    <div class="contact">[email protected]</div>
    <div class="branding">
         <h1>Name</h1>

        <img src="http://lorempixel.com/200/200" />
    </div>
</div>

DEMO HERE

Upvotes: -1

Related Questions