How do I align two flexbox elements?

Question

I have a problem with flexbox. I attempted to align two elements; the one to the top of the container, and another one to the center. Most of the flexbox examples were using three elements, not two elements. So I tried my own solution.

#main {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  height: 100px;
  background-color: #dfdfdf;
}

#box1 {
  display: flex;
  justify-content: flex-end;
  background-color: #ff0000;
}

#box2 {
  display: flex;
  background-color: #00ff00;
}

#dummy {
  display: flex;
  opacity: 0;
}

<div id="main">
  <div id="box1">box1</div>
  <div id="box2">box2</div>
  <div id="dummy">dummy</div>
</div>

...and I also applied it to horizontal case.

#main {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  height: 100px;
  background-color: #dfdfdf;
}

#box1 {
  display: flex;
  justify-content: flex-end;
  background-color: #ff0000;
  width: 200px;
}

#box2 {
  display: flex;
  background-color: #00ff00;
  width: 100px;
}

#dummy {
  display: flex;
  opacity: 0;
  width: 200px;
}

<div id="main">
  <div id="box1">box1</div>
  <div id="box2">box2</div>
  <div id="dummy">dummy</div>
</div>

However, it needs a useless dummy element. I think it is not a good idea :(

Is there any better way to solve this?

score 1 · Accepted Answer · answered Nov 22 '18 at 15:33

you don't have to add this 'dummy' div. According to me you should keep display flex in you container, but change justify-content: space-between to justify-content: center.

Then simply add position absolute to you first, child element and display it on the top of the container. Also remember to add relative position to your container.

Here is working code:

#main {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  height: 100px;
  background-color: #dfdfdf;
  position: relative;
}

#box1 {
  display: flex;
  justify-content: flex-end;
  background-color: #ff0000;
  position:absolute;
  top:0;
  width:100%;
}

#box2 {
  display: flex;
  background-color: #00ff00;
}

Fiddle: https://jsfiddle.net/95Lwcbuk/1/

yinken · Answer 2 · 2018-11-22T15:50:21.903

If you want to use flex-box only, you could wrap another .container element around each of your boxes, set these to use flex also, but set the first one to justify-content: flex-start, the last one to justify-content: flex-end.

See example

#main {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  height: 100px;
  background-color: #dfdfdf;
}
.container {
  flex-basis:50%;
  display:flex;
  flex-direction:column;
}
.container:first-child {
  justify-content: flex-start;
}
.container:last-child {
  justify-content: flex-end;
}
#box1 {
  background-color: #ff0000;
}
#box2 {
  background-color: #00ff00;
}

<div id="main">
  <div class="container">
    <div id="box1">box1</div>
  </div>
  <div class="container">          
    <div id="box2">box2</div>
  </div>
</div>

How do I align two flexbox elements?

2 Answers2