Safari 8 Flexbox float and center

Question

Whatever I do, I can't seem to get the columns that float left and right to center and align to the middle of it's container. Is there a way with Flexbox only to just have a left and right column, but still align them in the middle? It works fine in Firefox and Chrome, but not on Safari 8.

https://jsfiddle.net/vhem8scs/68/

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ccc;
  height: 200px;
  margin-top: 20px;
}

.column:after {
  content: '';
  display: table;
  clear: both;
}

.column div {
  float: left;
}
.column div:last-child {
  float: right;
}

Update

I added the following line to the container.

justify-content: space-between

While it aligns to the center/middle of the container, the floats do not work now.

Try `justify-content: space-between` in your `.container` class. Is that what you mean? — lux, May 11 '17 at 18:26
@lux that's correct, and thanks I had to update the title though because I am only experiencing the alignment issue in Safari 8. It works fine on Chrome and Firefox. — Miura-shi, May 11 '17 at 18:27
[Floats are ignored in a flex container.](http://stackoverflow.com/q/39194630/3597276) — Michael Benjamin, May 11 '17 at 19:35
[Flexbox code working on all browsers except Safari. Why?](http://stackoverflow.com/q/35137085/3597276) — Michael Benjamin, May 11 '17 at 19:35

score 1 · Accepted Answer · answered May 11 '17 at 18:28

Unfortunately it is rather difficult to visualize what you're trying to accomplish with your styles, but here's my preliminary analysis of the issue.

Once you declare an element to be a flex container, all the children will follow flexbox rules. Float styles will essentially be ignored. As a result, what you might want to try doing is making use of the flex-grow, flex-shrink, and flex-basis properties on the children to ensure columns sit in the proper position.

If you goal is to simply put space in between the columns, utilize the justify-content property with either space-around or space-between on the parent flex element.

Hope this helps!

Thank you, I will try this. I am just trying to have two columns with one that floats to the left, and one to the right, but align them in the middle/center of the container. — Miura-shi, May 11 '17 at 18:30

Safari 8 Flexbox float and center

1 Answers1