Login
Thumbnail flexbox 7e5047769d46dff883527d93e01cb000996d6bf5956c4635341c21eec62e8b27
Please sign in for access to all the free videos.
Dynamic Layouts with Flexbox
Flexbox is a css property that we can add to our Framer layers, which opens a lot of doors that are very difficult using other methods. Dynamic resizing content based on container size, laying out horizontal and vertical content, working with unknown amounts of content, and even re-ordering can all be achieved quickly with flexbox.
8 comments
Picture
Johannes Eckert Nov 10, 2016
great great tutorial! I am using framer a lot, but it never occured to me to use flex for laying out framer layers. Do you have a sense how relative positioning is affecting more involved animations or drag interactions? for the style object, if you don't know the javascript-notation of the property name, you can also write: style: "justify-content": "space-between"
Picture
Mike Johnson Nov 11, 2016
I haven't tried to add drag interactions into the flexbox style layout... that would prove interesting... Great tip on the javascript notation!
Picture
Brian Kerr Nov 18, 2016
Well done tutorial and very handy to know Framer can easily do this.
Picture
Baisampayan Saha Nov 29, 2016
If you can add the tutorial files here for download would be awesome!
Picture?type=large
Pedro Hernandez Mar 17, 2017
Awesome tutorial! I'm really gonna test this out. One comment, you can write "justify-content : "space-between" in the case you want to do it as it says in CSS trycks, it gives the very same result.
Picture?type=large
Jean-Francois Hector Apr 28, 2017
Hello Mike, I notice that you use a 'centerWithChildren()' function in the code. For some reason, it's not recognised in my framer, when I type the exact same code. That's not a problem for following the Sketchcast, as this is just a tiny part of it, but I'm curious about how to get this function working for me. I'm also interested to know where you find these extra functions or Utils that I don't see documented in the official Framer Docs (eg. Utils.textsize). Thanks!
peter ayuba Jun 16, 2017
amazing. Thanks for this help. New to framer and you have no idea how useful this is to me. Thanks very much and God bless you.
Picture?type=large
John Cross Neumann Jun 21, 2017
Hi Mike. I'm really enjoying your videos. They've been a big help. I too am wondering about your 'centerWithChildren()' function. I took a stab at what I thought it was by setting the parent width with 'this.contentFrame()["width"]' and then centering, but I'm curious to see yours. :) Thanks!