Streaming live at 10am (PST)

New tute: Why Flex is better than Rows


#1

I’ve been spending a lot of time with webflow lately and am really coming to appreciate the flexibility of flex, especially when compared to rows and columns. I also have pretty much sworn off the Container object as it just doesn’t have enough flexibility and Divs seem to do a much better job.

Very interested in any feedback on this video and especially if something is not correct OR there is an easier way to accomplish it.


#2

@chippwalters

I agree with you there. After building my second site with Webflow, I have gone back and removed all sections and replaced them with divs. A lot more flexible when used with flex!


#3

Hi @chippwalters :smiley:

I’ve not used containers much in recent builds either and I haven’t used rows since Flexbox launched. The div block with a max width of 1200 or 1500px gives a fuller look on a larger screen.

I always give the advice of learning to use Flexbox, it’s so much quicker to create and edit later on.

On your video, you’re editing the width of the flex wrapper with pixels at each breakpoint, which doesn’t really give a truly responsive design. On the desktop breakpoint just give a width of 100% to the wrapper and the content will resize automatically with the viewport width. Maybe you do this already though and just not on this video?

I think the way you set up near the end with the invisible spacer is a little complicated, you can do that without the spacer using purely flexbox with two inner wrappers 50/50 or 40/60 aligned horizontally, and inside those the objects would be stacked vertically.

The beauty of this though is that your way is NOT wrong at all, it’s like mental arithmetics… everyone calculates differently and as long as you get to the same result, who cares? :smiley:


#4

Thanks for your considered reply and I agree. I’ve done flexboxes inside flexboxes, and while it works, it can get complicated-- and you’re right, both ways work. FWIW, I do use % for my div-wrappers, but I wanted to compare this with Containers, that’s why the hard pixel widths.


#5

Awesome content @chippwalters - especially for intermediate Webflow designers that are getting more used to layout and positioning within the Style tab!!