Set minimum distance between objects inside flexbox

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
User avatar
Pablo
 
Posts: 21525
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Set minimum distance between objects inside flexbox

Post by Pablo » Sun May 24, 2020 3:00 pm

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
 
 
Posts: 105
Joined: Sun Dec 31, 2017 4:27 pm

Re: Set minimum distance between objects inside flexbox

Post by heynen » Sun May 24, 2020 3:18 pm

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)

User avatar
Pablo
 
Posts: 21525
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Set minimum distance between objects inside flexbox

Post by Pablo » Sun May 24, 2020 3:46 pm

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
 
 
Posts: 105
Joined: Sun Dec 31, 2017 4:27 pm

Re: Set minimum distance between objects inside flexbox

Post by heynen » Sun May 24, 2020 4:11 pm

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.

User avatar
Pablo
 
Posts: 21525
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Set minimum distance between objects inside flexbox

Post by Pablo » Sun May 24, 2020 5:14 pm

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
 
 
Posts: 105
Joined: Sun Dec 31, 2017 4:27 pm

Re: Set minimum distance between objects inside flexbox

Post by heynen » Mon May 25, 2020 1:07 am

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."

User avatar
crispy68
 
 
Posts: 1052
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Set minimum distance between objects inside flexbox

Post by crispy68 » Mon May 25, 2020 5:16 am

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.

User avatar
Pablo
 
Posts: 21525
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Set minimum distance between objects inside flexbox

Post by Pablo » Mon May 25, 2020 6:19 am

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.

Post Reply