Webflow has flexbox now!

@jsandlin85 We did officially retire IE9 and IE10 support earlier this year, a few months after Microsoft stopped shipping security updates to those browsers: IE9 and IE10 support for published websites will soon be deprecated on March 1st, 2016 - Webflow announcements - Forum | Webflow – for all intents and purposes, these browsers should be considered harmful. If you still have clients that still demand that their websites sites support these browsers, it might be time for a potentially uncomfortable conversation to explain to them why this is not a good idea :blush:

We do still support IE11, and it has most of flexbox implemented, but out of all modern browsers has the most buggy implementation. You can see the most serious bugs listed here: GitHub - philipwalton/flexbugs: A community-curated list of flexbox issues and cross-browser workarounds for them.

We recommend that you test your layouts on real IE11 browsers (if you have a significant percentage of users who visit with that browser) to catch potential issues early. Most of the time, however, you might see some non-critical degradation that still leaves your content readable - but perhaps not as beautiful as in the most recent versions of Chrome/Firefox/Safari/Edge.

1 Like

I think I need some help with Level 26 :sweat: I know it must be something ridiculously simple, but I don’t get it.

EDIT: Nevermind, I did it! :grin:

Thanks for the reply; I completely agree and this is pretty much what I tell my clients walking into projects. It actually just slipped my mind this morning about Microsoft’s official support drop for those browsers. I must feel like I’m waiting to wake up from a dream lol :wink:

I don’t know if anyone remembers the Australian retailer Kogan that instituted a 6.8% IE7 tax to users making purchases on their site in IE7, but when I saw that I thought it was hilarious and brilliant.

On a side note, I just wanted to say thanks to the entire Webflow team for what you are doing. My story falls under the “You are changing my life and career for the better” category that I know a lot of others are in as well. I feel like Webflow is fulfilling a promise to the web that so many others have attempted to for years. I don’t typically gush like this unless I am completely convinced of a service’s value and you guys are nailing it. Watching you grow in both features and community has been an inspiration. Seriously, thank you. As long as you continue this great work, you have a loyal evangelist in me :smile:

7 Likes

I’m on level 27, I’m reminded of this Star Trek Game:

The game from The Game, Star Trek the Next Generation - YouTube

Great functionality and great way of instructing us!

Love this new feature guys! - Please keep on keeping on. You guys do amazing work, just wanted to say thank you! and keep it up.

-Sean

I just finished the game … Love it :heart:
Awesome feature. Thanks a lot.

Do you think the Webflow preview of the ebook “Web Design 101” (build with flexbox) could be available for Webflow users ?

2 Likes

Sure, here it is: preview link for ebooks.webflow.com

5 Likes

Congratulation to the webflow team, this is great, and you keep surprising us with new announcements! Still exploring everything one can do with this, it looks like an alternative to the grid system and the layout properties rather than something on top of that. Which sounds great to me because bootstrap grids are somehow counterintuitive and limited in what one can achieve. This is a major step forward because Webflow is now really going to be a tool that empowers designers - so they can focus on content and be creative without constantly thinking: “How am I going to achieve that in HTML/CSS? Is there a way?”

Maybe someone can explain to me if it could also be a solution to the problem of how to create responsive layouts that scale well on larger screens? I observed in the training videos that sometimes you use flexbox layouts in combination with containers, sometimes you don’t, so that would be my first question.

For those new to it, I found this short article about flexbox properties particularly useful: Better, Simpler Grid Systems — Solved by Flexbox — Cleaner, hack-free CSS

Going back to finish the game now, time to have some fun!

This is so great. Thanks you guys!

For those who want to have a basic understandig of how flexbox works at the code level (which I always find helpful) Ryan Irelan has a nice video overview on his site. https://mijingo.com/lessons/guide-to-flexbox/

2 Likes

This is so great! Addresses situations I’ve been stumped on in the past. Going back and smoothing over some designs with it. Loved the game, too! :slight_smile:

2 Likes

Thanks a lot Bryant !

Loving this feature, thanks!! :smiley:

Looking at the generated CSS, I was a bit surprised to see it doesn’t include vendor prefixes, when according to caniuse around 5% of US users (and a larger number of global users) are still on browsers that require prefixes, mostly -webkit. Curious if @callmevlad or someone else on Webflow staff can comment on the reason for not including prefixed styles?

2 Likes

This is amazing!

Will this make it possible to make masonry grid in CMS?

@PixelGeek

Done / Video:

http://quick.as/3xbVTo5zQ

Will using flexbox in anyway negatively affect SEO? Sorry if it’s a dumb question but flexbox is entirely new to me

No it wont. It is just a CSS property. Nothing to do with SEO :slight_smile:

1 Like

Hi webflow team, I just saw this exciting news. Just wanted to ask how flexbox works with the cms? Does it work with it?
@pixelgeek

Flexbox is just a new type of CSS styling, so it will work with CMS or anything else the same as any other CSS styling.

2 Likes

Just wondering if I am the only one have this problem, some the of layout on my website is not where it should be in internet explorer this morning. Not sure if this has got anything to do with the new feature…

Hi @OurLocalMarkets

Are you using Internet Explorer or Microsoft Edge?

If you’re using explorer, it might be that, that browser is no longer supported by Microsoft therefore the Webflow team are no longer taking it into account when testing cross browser compatability. See this article:

http://forum.webflow.com/t/ie9-and-ie10-support-for-published-websites-will-soon-be-deprecated-on-march-1st-2016/23823

Hope this helps, Aaron