Set minimum distance between objects inside flexbox

[Pablo]

I am referring to the layout grid.
I do not think the card container is the right choice for this.

But a flex container may also work.
This allows you to set a fixed width for the card via the 'flex basis' property.

[heynen]

Thank you!

I am currently trying flex container. Might work.

For layout grid: How can I tell it to put two items in one row (on broad screens)?
It works when I use two columns, but with two columns, the order of the items does not work.

I want this (the newest two articles in top row).
1 2
3 4
5 6

I columns, the order would be:

1 4
2 5
3 6

Of course, I could change the order manually in a column design, but than it would not work in responsive (once the design changes to a smaller screen)

[Pablo]

To put two cards in one row of a layout grid you will have to create two columns.
Or set the 'full width' property to false, so the card will have a fixed width.
However, in this case the cards will not be flexible on smaller screens.

[heynen]

Thanks again for all your answers.

Still, one piece of the puzzle always seems to be missing. So maybe you have an idea?


a) I tried flex container. Works very well. But is it possible to put my "news items" into a flex container (each news item is a layout grid!).

Also, one problem: As long as two news items are together in a row, I want to have a minimum distance between them. But flex container will first reduce that distance to 0, and only if the screen gets even narrower, change the layout and put all news items in one row. Any possibility to change this? Maybe with breakpoints or with margins around the news items? Margin so far did not work.


b) I tried layout grid, I cannot use two columns (as described above). When using one column, I do not even manage to tell the browser to put two "news items" in one row (if there is enough space). I have chosen "align self - flex start" for each news item.

[Pablo]

You cannot put a layout grid inside a flex container. Layout grids and flex containers are two different layout methods which cannot be nested.
But I think it will be the easier to use one card per new item.

You can have different margins in breakpoints.

[heynen]

1) So what solution are you suggesting for my problem? Put cards into a flexbox? I tried, but several difficulties. So if you think this is the solution, could you explain in more detail?

2) Are you sure that it is not ok to put a layout grid into a flexbox? That is the solution that works best at the moment, and according to this source (which seems reputable), it is possible:

https://webflow.com/blog/flexbox-and-css-grid
"Of course CSS grid and flexbox can work together in a layout. You can use flexbox inside CSS grid and vice versa. For instance, you could use flexbox to center an element like a button both vertically and horizontally within a particular grid cell (since centering with other CSS methods is … tricky). And you could also flip this scenario, using grid to control the placement of data within cards whose layout is determined, at a higher level, by flexbox."

[crispy68]

Is this what you are after?

https://tinyurl.com/y78qwkt6

As a side note, I have used flexbox containers inside of layout grids numerous times without any issues.

[Pablo]

1) So what solution are you suggesting for my problem?

I think you should use a flex container or flex grid.

2) Are you sure that it is not ok to put a layout grid into a flexbox?

A layout grid is not the same a css grid. In WWB, an flex grid = CSS grid. Layout grid = Bootstrap grid.
It may work but I think it's too complicated for what you are trying to do.

[heynen]

Dear Pablo, Dear Crispy,

first of all, thank you VERY much for your help on numerous issues. My two pages both look almost perfect now thanks to your input. I am very happy with both results! Personal page https://www.heynen.tv News page https://www.freiblatt.de

I am currently working on the remaining issue from May that I posted here: For the layout of the main page, I want to use a Flex Container (currently it is a layout grid). The objects inside the container all have a width of 470 and a distance of 20 (this already works in Flex container). On big screens, the objects should be side by side, and on smallers screens in one row. This also works well:

Big screen
1 2
3 4
5 6

Small screen
1
2
3
4
5
6

The problem arises when the screen size is between 960 and 980 pixels: Below 980 the layout should change to small screen. This does not happen. Instead, the browser reduces the distance between the object, until (at screen size 960) the objects 1 and 2 touch each other in the middle. The browser only switches to the small screen layout, when the screen size is BELOW 960.

Is there any way to force the Flex Container into the small screen layout already at 980? I tried setting a breakpoint at 980, and changed several values in that breakpoint (margin etc), but none of that helped.

Thank you very much in advance!

Malte

PS: Crispy has suggested using seperate layout grids for each row (so object 1 and 2 would be in one layout grid, object 3 and 4, etc). This works well, except for one point: I use a shadow around the whole page. This shadow is THE main design element. With seperate layout grids, there would also be seperate shadows, not one shadow for the page as a whole.

[Pablo]

Where do I need to go to see the problem?

Also, to be able to help you I need a (demo) project file, so I can see all settings.

Important:
I do not need to complete project, only a small demo with 1 page and the relevant elements.

Related FAQ:
https://www.wysiwygwebbuilder.com/forum ... 10&t=82134

[heynen]

Thank you for your fast answer!

Here is the wbs file
https://www.freiblatt.de/test/test.wbs

Here is how it looks like (the problem arises at screens widths between 960 and 999 pixel.
https://www.freiblatt.de/test/index.php

THANK YOU.

[Pablo]

I do not see any problems on the page.
Can you please describe exactly where on the page I need to look to see the issue?

Also, you did not include the image so when I open your project all I see is an empty page.
And can you please also remove all extensions used by the project when sharing it?
I do not have all extensions installed so it will cost me a lot of extra time to find and install all extensions in order to load the project.

[crispy68]

Hey Heynan,

The key here is understanding how a flex container works. When you place objects inside, the objects inside take up only so much space. The rest of the space is divided up based on what choice you choose (ex: flex-start = put all objects at the beginning and the remaining space at the end). In your case, your images are each 470px. You have 2 of them on a line so that is a total of 940px. You have a max-width set to 1000px. This leave 60px worth of space. A flex container is not going to push an object to the next row until all the available space has been used. This is why your 2 images get closer to each other until they touch and then it gets pushed to the next row. There is no way to add a breakpoint for it to flip to vertical as this is not how flex box works. Setting the breakpoint in the layout grids have no effect on this. You can change it to any # and it doesnt do anything thats because flexbox is in control.

My only thought is you will need to cheat a bit. Where the space is between the images, add a white border to the image. This way when the images touch (like above) it work as you want and but it still looks like there is space in between them (which is actually the white border). You will have to tweak the width to take in consideration of the border (the 470). So for example if the spacing between images is 20px, then adding a 10px border will give you the 20px in between.

Also, you need to set your flex box Justify-Content to center.

However, if you want my honest opinion, I would leave it as is. why? because you only will see this happen if someone actually views your site and then shrinks there browser horizontally right until that point for those miniscule 10px. How many people will actually do that? I doubt many. Most will either see your desktop layout or the single column layout and they wont even see what you are seeing.

[heynen]

Dear Pablo, Dear Crispy,

thanks to both of you for your help!

I have now put a new "test.wbs" file into the directory (without extensions) and I have added a folder with the images (the Folder is called Test November).

Summary of my problem: On screen sizes between 960 and 980 pixels, the objects inside the flexbox touch in the middle. They should not touch.
This works on larger screens (there is a 20px distance between the objects). And on smaller screens (the objects are one row).

Thanks for you insightful explanations, Crispy.
That makes two points clear that I was not sure about: a) Breakpoint does not affect flexbox. b)

I tried the solution with border (clever idea). Unfortunately, it removes the round edges that I use for the layout grids (the edges of the background image are rounded. That is gone when the layout grid has a white border).

I will just accept the problem, as you suggested. Still, I am hoping for a solution that would make the page look good on screen sizes between 960 and 980.

thanks!

[Pablo]

You did not include the images so when I open your project, all I see is an empty page.
Can you please share all files that are needed to reproduce the unwanted behavior?

[heynen]

Thanks for checking so fast! Sorry if I did the test files wrong.

You can now see the display error by:

a) opening the page https://www.freiblatt.de/test/index.php and viewing it at a resolution of 960 pixels (width)

or by

b) dowloading the folder https://www.freiblatt.de/test/test.zip and the file https://www.freiblatt.de/test/test.wbs

Both should work, I have updated the files in the directory.

[heynen]

PS I have changed the image folder to test.zip (otherwise the download might not work)

[Pablo]

I'm sorry but I do not see any 'errors'. This is how flexbox works.

[heynen]

Thanks for your reply!

I did not want to so that this is a program error. Just wanted to know if there is a workaround. Best solution would be to force the elements in one row already at 980 pixels.

In any layout, I have a distance between the objects, at left / right, and also top / bottom. Only at 960 pixel, the distance vanishes due to flexbox behaviour.

[crispy68]

@heynan,

To have rounded corners with the border simply increase your border radius from 2% to 5% in your code.

[heynen]

Thank you! Will try! Sounds good!

[heynen]

Dear Pablo and Crispy, thanks again for your fast help!
The flexbox works perfectly now on my page.

https://www.freiblatt.de

Crispy, to make it work in any screen size, I have in fact used your clever workaround (white border, plus increase the rounded edges to 4-5%).

[crispy68]