Streaming live at 10am (PST)

Flexbox or Columns Widget? Which is better? When to use?


#1

All things being equal which is better and which should you use? Let's say, for example, you want to create a simple two column section for you webpage. You want both columns to be 50% in width and you need them to stack on mobile views.

Should you use the column widget or DIV(s) with flexbox applied? Which creates less code? Which one is better in which situation? What do the Webflow devs recommend?

The reason I ask is I have several sections of my site with simple, two column layouts and I never know which one is best to use.

Thanks for the feedback!


#2

The simplest approach with 2 columns is none of the above. Just two divs, inline-box, and they'll stack. You can add floating in the equation.

That's what I use for every 2 columns layout. I make the right column float right so it's pretty solid.


#3

Good point! I tend to forget about simple floats because I use flexbox so much.

So the semantic, code friendly approach is to create two DIVs, set their width to 50%, and set them both to inline? The only problem I typically run into with this approach is you need to set your padding in percentage and I usually like to use a fixed width padding on my columns. Flexbox makes setting padding very easy to do!


#4

Advice: only use Flexbox when you can't use float or another solution. Especially for very simple things. Flexbox still have adoption issues.


#5

My short answer is that I never use the columns widget. Always build my columns from scratch. More control for me personally.


#6