1

I have a flexbox container with three flex item children. I would like the first div to be positioned at the left(flex-start), the second would need to be centered horizontally and the third one should be at the very right(flex-end).

I tried with pretty much every combo possible, but no luck. 

.container {
  max-width: 80%;
  background-color: #222;
  height: 80px;
  margin: 50px auto;
  display: flex;
  flex-direction: row;
  align-items: center;
}
div:nth-of-type(1) {
  background-color: #666;
  flex-basis: 50px;
  height: 60px;
}
div:nth-of-type(2) {
  background-color: #fff;
  flex-basis: 150px;
  height: 60px;
}
div:nth-of-type(3) {
  background-color: #eee;
  flex-basis: 80px;
  height: 60px;
}
<section class="container">
  <div class></div>
  <div class></div>
  <div class></div>
</section>
madebym
  • 87
  • 10
  • Possible duplicate of [Horizontally center flex item between 2 flex items of different widths](http://stackoverflow.com/questions/33287476/horizontally-center-flex-item-between-2-flex-items-of-different-widths) – Michael Benjamin Oct 23 '15 at 16:03

1 Answers1

1

On .container you need set the justify-content property to space-between. This property defines the alignment along the main axis.

.container{
  justify-content: space-between; 
}

More info here: https://css-tricks.com/almanac/properties/j/justify-content/

BJack
  • 2,404
  • 1
  • 13
  • 11
  • Yes, but if the third element(in my scenario) is wider than the first two, then the second element is not centered. Of course, it gravitates to the left now :( – madebym Mar 31 '15 at 15:00
  • I see what you mean now-- I will do some testing and see if its possible using flex. – BJack Mar 31 '15 at 15:03