CODEWITHSUNDEEP
cssflexbox
user2227400
user2227400

Reputation:

How can I achieve float left at bottom and float right at top with css flexbox?

How can I simulate float left bottom and float right at top with the CSS3 flexbox? I want to achieve following situation (Important: the text in the div boxes should be also vertical and horizontal centered):

following situation

EDIT: PLNKR EXAMPLE: http://plnkr.co/edit/oVfbAAIZxRQLRRML7rJR?p=preview But the text in the div boxes should be also vertical and horizontal centered.

Following Code should be augmented:

display: flex;         // for parent container
align-self: flex-end;  // for child div-1 to place it at bottom
margin-left: auto;     // for child div-2 to place it right top

(I don't like margin-left: auto because there is no min-margin at very small screens.)

Solution:

The code above is augmented with the code below and children get following additional css:

display: flex;             // also for child box for its content
align-items: center;       // center vertically
justify-content: center;   // center text horizontally

Upvotes: 1

Views: 1667

Answers (2)

user2227400
user2227400

Reputation:

That's the solution:

Both parent and children have to use flex. (col-md-12 is from bootstrap and has nothing to do with the question)

HTML

  <div class="content col-md-12">
      <div class="div div-1">Div 1</div>
      <div class="div div-2">Div 2</div>
  </div>

CSS

.content {
    display: flex;
    padding: 20px;
    border: 1px solid black;
    height: 200px;

    flex-wrap: wrap;  /* is not necessary */ 
}

.div {
    padding: 10px;
    color: white;
    background: black;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.div-1 {
    height: 90px;
    align-self: flex-end;
 }

.div-2 {
    height: 60px;
    margin-left: auto;
 }

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122087

Try this https://jsfiddle.net/2Lzo9vfc/108/

HTML 

<div class="content">
    <div class="div div-1">Div 1</div>
    <div class="div div-2">Div 2</div>
</div>

CSS

.content {
    display: flex;
    padding: 20px;
    border: 1px solid black;
    width: 100%;
    height: 200px;
    flex-wrap: wrap;   /* is not necessary */ 
}

.div {
    padding: 25px;
    height: 20px;
    color: white;
    background: black;
}

.div-1 {
    align-self: flex-end;
}

.div-2 {
    margin-left: auto;
}

Upvotes: 5

Related Questions