How do I align two flexbox elements? [duplicate]

This question already has an answer here:

Center and bottom-align flex items

3 answers

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?

asked Nov 22 at 15:18

Caesium133

5619

marked as duplicate by Paulie_D css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 22 at 16:17

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

add a comment |

This question already has an answer here:

Center and bottom-align flex items

3 answers

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

asked Nov 22 at 15:18

Caesium133

5619

marked as duplicate by Paulie_D css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 22 at 16:17

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

add a comment |

This question already has an answer here:

Center and bottom-align flex items

3 answers

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

asked Nov 22 at 15:18

Caesium133

5619

This question already has an answer here:

Center and bottom-align flex items

3 answers

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

This question already has an answer here:

Center and bottom-align flex items

3 answers

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

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

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

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

html css layout flexbox

asked Nov 22 at 15:18

Caesium133

5619

asked Nov 22 at 15:18

Caesium133

5619

asked Nov 22 at 15:18

Caesium133

5619

asked Nov 22 at 15:18

Caesium133

5619

asked Nov 22 at 15:18

Caesium133

5619

marked as duplicate by Paulie_D css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 22 at 16:17

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

marked as duplicate by Paulie_D css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 22 at 16:17

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

add a comment |

2 Answers
2

active

oldest

votes

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/

answered Nov 22 at 15:33

hetious

1706

add a comment |

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>

edited Nov 22 at 15:50

answered Nov 22 at 15:45

yinken

24328

add a comment |

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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/

answered Nov 22 at 15:33

hetious

1706

add a comment |

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/

answered Nov 22 at 15:33

hetious

1706

add a comment |

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/

answered Nov 22 at 15:33

hetious

1706

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/

answered Nov 22 at 15:33

hetious

1706

answered Nov 22 at 15:33

hetious

1706

answered Nov 22 at 15:33

hetious

1706

answered Nov 22 at 15:33

hetious

1706

add a comment |

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>

edited Nov 22 at 15:50

answered Nov 22 at 15:45

yinken

24328

add a comment |

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>

edited Nov 22 at 15:50

answered Nov 22 at 15:45

yinken

24328

add a comment |

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>

edited Nov 22 at 15:50

answered Nov 22 at 15:45

yinken

24328

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>

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

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

edited Nov 22 at 15:50

answered Nov 22 at 15:45

yinken

24328

edited Nov 22 at 15:50

answered Nov 22 at 15:45

yinken

24328

answered Nov 22 at 15:45

yinken

24328

answered Nov 22 at 15:45

yinken

24328

add a comment |

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Htykuut