- This topic is empty.
November 26, 2013 at 11:58 pm #157213November 27, 2013 at 10:58 am #157245
Safari up to 6.0 ( 6.1 for iOS ) supported an old incompatible draft version of the specification. Safari 6.1( 7 for iOS ) has been updated to support the final version.
I see you’re using
display: -webkit-box;for old Safari. I’m sure it simply has a different implementation than the current spec.November 27, 2013 at 1:34 pm #157258
I’ve got a site that is built on flexbox and I’m wondering how in the hell to center things.
I would argue that that’s a bit of an issue to begin with considering it’s lack of < IE10 support, but obviously your choice! When you’re using a super new technology like this, it simply has to be expected that not everything is going to work properly.
What would you do?
I wouldn’t build a site using flexbox to begin with, so I don’t think my opinion particularly matters ;)
Unfortunately, my Safari is at v7 so I have nothing to test with for ya. Possible solution: give your child a position of absolute and t/r/b/l values of
0. This should kick
margin: autoin the but and make it work properly in all browsers.November 27, 2013 at 1:34 pm #157259November 27, 2013 at 1:42 pm #157260
Possibly more help: http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
Vertical and horizontal centering within a flexcontainer is trivial. Just set justify-content and/or align-items to center. Again, it depends on the orientation of the main axis, so whether flex-direction is set to row or column.
That might be the winner, there!November 27, 2013 at 2:44 pm #157264AlenParticipant
I’ll return to you in 3 years when browser support is better.
You could feature detect and serve flexbox to browsers that support it.November 27, 2013 at 3:39 pm #157265brendanParticipant
I think using flexbox for your entire layout is still a little too new for even the most cutting edge projects (obviously thats a decision you should be making based on your audience/analytics)
Its out there in the wild already in various forms, Chromes video controls are all flex items (you may need to enable the shadow dom to inspect it) and also on apple.com (http://www.apple.com/iphone/compare/ the 3 callouts on grey boxes near the bottom). The chrome one is different because its guaranteed support (they know what browser its in) but the example on apple.com I think is more real world, you can easily fall back to a non equal height, un-vertically centered box and its not the biggest deal.
IMO, use it for progressive enhancement, don’t rely on it.November 28, 2013 at 3:20 am #157291basement31Participant
If you are only using the ‘new’ syntax I believe theres only -webkit- to prefix, and Im pretty sure mozilla are not going to be doing any vendor prefixes going forward?
- The forum ‘CSS’ is closed to new topics and replies.