Reproduce 3 columns layout with flexbox

Design help General
1

Hi everybody,
(excuse my english, it’s not my language :slight_smile:

I try to reproduce the behavior of a 3 columns layout but using flexbox because the page must display the results of a search request (managed server side by the client), all the results must appear in the same div and not in 3 different divs like those used in a 3 columns layout.

(I hope I’m pretty clear :slight_smile:

Here’s the link: https://preview.webflow.com/preview/laboreunis?utm_source=laboreunis&preview=62809a9e704a5033e9de6177dbdcdf6e

On the page “Analyses”

The first area displays the results in a 3-column “standard” element like the one provided by webflow.
It is this result that I wish to obtain.

The second area is what I achieve with flexbox but there are 2 problems:

  • The display order is not the same: the result “2222” should appear below the result “1111”

  • When I unfold the result to display the details, the entire layout is broken.

Can anyone help me solve these two problems?

Thank you in advance.

2

Problem 1 : Change the flexbox settings:

Here’s how it should be

63
632560×1080 109 KB

Problem 2: Explain it better. I don’t see any problems when unfolding the area.

3

Hi Jean,

Thanks for your help.

I’ve tried this solution too but that doesn’t work cause in this case I must set a sizing for the flex child (Div_Analyse) with a custom grow and shrink behavior relative to the height of the flex container.

In the example, the custom grow and shrink behavior is set to 33.333% basis, that’s why we have a blank space below each flex child.

That’s allow the wrapping to work but that’s cause also unpredicted results with the flex child div unfold.

4

Can you please explain your point of “all the results must appear in the same div and not in 3 different divs like those used in a 3 columns layout”?

Currently all the columns are in the columns div and all flex elements are in the Container_Analyse div. What s the difference?

5

Hi Dram,

With a columns layout, we have a number of different columns (3 in this case) and because at the end this page will be a server side generated page, we can’t address each items to the first, second or thirst column.

6

So different columns are no go, but different divs are fine? Obviously you will need content in different divs for flex layout to work.

7

Right, server generate result elements as div.

That’s why I try to reproduce a “standard” webflow 3 columns layout behavior and flow with flexbox.

8

I am afraid the only way to set up the similart structure to columns and with the behaviour that you need is like this. But you will have to custom code the content flow. Currently obviously no automatic content flow will happen if you put #4 after #3 - it will simply expand the first column vertically.