Streaming live at 10am (PST)

Using display: flex in layout to equalize columns


#1

My problem is this:
I'm trying to use display: flex in my layout to equalize the columns. but Clearfix this class disrupting the layout creating a margin of 1px.

I resolved this by adding -1px in flex class. But this margin difficult if I want to apply the flex in a column of webflow because will take the original margin.

In the code, to solve the problem would be enough to take this Clearfix class.

For now I will not use the webflow columns, but would love to have a solution to use them.

http://d2c-apresentacao.webflow.com/teste

go to page "teste":
https://preview.webflow.com/preview/d2c-apresentacao?preview=1b03eb17b5d814fdb5ca11c7abed46e6


The logic behind the class "w-clearfix"
#2

Hi,

May I ask how you add the flex display css to your project. I am asking because of also experimenting with Flex. One of the challenges is the fact that In design mode we are not able to see the result of custom code (css) in the preview. In this forum you can find a post about using embed html, but I could find such an embed in your example.

Next, I noticed that using a flex class using the normal method could mess up the site because of CSS nesting.
I found a solution, but it's a kind of hack. I will post about it when I have a written a clear description of what I did. Hopefully with some examples.


#3

I added the class in webflow and their attributes on the control panel "custom code".

There are some Haks to match the columns, but they work only with text content, if I want to use a background with a filled image, I need the div adapts.

Despite the Flex does not have good support, I prefer to use it. It is simple and works great.


#4