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
Post Reply
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Set minimum distance between objects inside flexbox

Post by heynen »

Dear all,

is it possible to set a minimum distance between items in a flexbox?

On broad screens, I want to have two items next to each other. The distance between them should ALWAYS be 20 Pixel. On smaller screens, the second item should move into the next row (this works already).

But: Before it moves, the two items are pushed closer together, so that the distance is less than 20 pixels. The seconde item only moves into the next row, once the distance is 0 pixels. I want it to move already when the distance is less than 20!

Any clever way to do this?

One solution is suggested here, but I don't know it this produces clean code:
https://stackoverflow.com/questions/206 ... xbox-items

Thanks!

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

Re: Set minimum distance between objects inside flexbox

Post by crispy68 »

Why not just add 20px margin to the right or left of one of the objects?
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: Set minimum distance between objects inside flexbox

Post by heynen »

Thank you very much! Cleaner and simpler. That works, the negative margin for the flexbox is not necessary.

There is still one thing that does not work: On a small screen with the firefox browser, my news items have no margin at the right of the screen. (see image).

Image

It should look the same as on the left (on the left, there is a nice margin between the left border of the screen and the left border of the news item).

You can see the layout here: https://www.freiblatt.de/test/

You can find the corresponding WBS-file here: https://www.freiblatt.de/test/download.html

Thank you very much in advance!

Malte
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: Set minimum distance between objects inside flexbox

Post by heynen »

I have tested this a bit:

The Firefox mobile browser on small screens COMPLETELY ignores the margin at the right of the "news item" (like in the photo above), if you use ANY method to add some space at the left:

1) If you add a margin at the left oft the "news" item.
2) If you add some padding at the left of the FlexContainer (The "news items" are inside a Flexcontainer).
3) If you add a margin at the left of the Flexcontainer.

I also tried negative margin / padding, but nothing helped. Either, the mobile browser ignores the space at the right. Or, the spaces at the right and at the left are unequal. I found no solution.

Any help?
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Set minimum distance between objects inside flexbox

Post by Pablo »

I do not think the margin is ignored.
However, the margin will be added to the width of the flex container (which is 100%).
So the total width will be 100% + margin. This is what you see in your browser.
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: Set minimum distance between objects inside flexbox

Post by heynen »

Thanks! Yes this makes sense!

Still, the site is displayed correctly in the opera or "duckduckgo" mobile browsers.Is there any way to make this work in the mobile firefox browser as well?

There might be two possibilities:
a) Tell the browser, that the 100% should include the margin. Possible?
b) Find another way to keep the minimum distance between the objects inside the flexbox. Possible?

At the moment, any solution that works in firefox leads to errors in the other browsers.
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: Set minimum distance between objects inside flexbox

Post by heynen »

Maybe I have to rethink my approach completely?

What I want to achieve is:

1) On Laptop Screens, the page should have two "news items" in each row. Both items should always have a distance of 20px
https://www.freiblatt.de/test/

The order of the news items must be:
1 2
3 4
5 6



2) On small screens, the "news items" should regroup like this.

1
2
3
4
5
6

They should be centered on the screen, and have a small margin (ideally 5-10 pixels) to the left AND right.

What I did:
I put the news items in a flex container.
I put that flex container inside a layout grid (with just 1 column).
I added "margin 10" to the news items
I added "gutter width 10" to the outer layout grid.

Correct?
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Set minimum distance between objects inside flexbox

Post by Pablo »

Firstly, I do not recommend to put a flex container or flex grid inside a layout grid.
Layout grid and flex box are two different layout concepts , they may conflict with each other.

To implement this layout, you may consider using cards. Then all; you will have to do is add a margin to the cards.
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: Set minimum distance between objects inside flexbox

Post by heynen »

Thank you Pablo, great idea! I am sure this generates much cleaner code. I was able to copy most of my design with cards.
I still need help.

This is as far as I got: https://www.freiblatt.de/b/cards.html

Three problems remaining:
1) The cards should keep their width of 500px all the time (this works), but they should shrink when the screen is narrower than 510px
2) Each card should link to an article (onclick)
3) The program puts all cards in one row. Once I have 10 or 20 articles, they would not fit on the screen any more. See photo:

Image

Thank you!
Last edited by heynen on Sun May 24, 2020 12:00 pm, edited 2 times in total.
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Set minimum distance between objects inside flexbox

Post by Pablo »

If you set the max width of the layout grid to 1000px (+ margin) then the cards will not get wider on large screens but shrink on smaller screens.
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: Set minimum distance between objects inside flexbox

Post by heynen »

Thank you.
I have already set the maximum width of the card container to 1065.
But I also need to set a minimum width of 500px for the cards. Otherwise, there would be more than 2 cards in each row.

Everything works well, except for the view on screens that are less than 500px wide.

I tried to define a breakpoint. But it was not possible to change the custom style HTML code ONLY in one breakpoint (the changes would affect all breakpoints).
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Set minimum distance between objects inside flexbox

Post by Pablo »

In an HTML object you can set the CSS for current breakpoint only.
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: Set minimum distance between objects inside flexbox

Post by heynen »

So have can I solve my problems?

Three problems remaining:
1) The cards should keep their width of 500px all the time (this works already), but they should shrink when the screen is narrower than 510px
2) Each card should link to an article (onclick)
3) The program puts all cards in one row. Once I have 10 or 20 articles, they would not fit on the screen any more. See photo:

Image
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Set minimum distance between objects inside flexbox

Post by Pablo »

In a layout grid you can add up to 12 columns. For example, one for each card.
The breakpoint determines when the layout will switch to stacked mode.
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: Set minimum distance between objects inside flexbox

Post by heynen »

Are you talking about layout grid or card container? I would use layout grid, card container or flexbox, whatever is working.

Do not know if columns work for me. I will have maybe 40 news items in the end.
I need this behaviour for the news items:

Big screen:
1 2
3 4

Small screen:
1
2
3
4

For a card container, I could think of two solutions:
1) Add a breakpoint at 520px, and in that breakpoint set another minimum width for the cards (if there is any possibility to do this).
2) Add HTML code to the "card container", telling the container to only put 2 cards in each row.
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Set minimum distance between objects inside flexbox

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

Re: Set minimum distance between objects inside flexbox

Post by 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)
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Set minimum distance between objects inside flexbox

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

Re: Set minimum distance between objects inside flexbox

Post by 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.
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Set minimum distance between objects inside flexbox

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

Re: Set minimum distance between objects inside flexbox

Post by 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."
User avatar
crispy68
 
 
Posts: 2729
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Set minimum distance between objects inside flexbox

Post by 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.
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Set minimum distance between objects inside flexbox

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

Re: Set minimum distance between objects inside flexbox

Post by 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.
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Set minimum distance between objects inside flexbox

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

Re: Set minimum distance between objects inside flexbox

Post by 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.
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Set minimum distance between objects inside flexbox

Post by 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.
User avatar
crispy68
 
 
Posts: 2729
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Set minimum distance between objects inside flexbox

Post by 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. :D
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: Set minimum distance between objects inside flexbox

Post by 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!
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Set minimum distance between objects inside flexbox

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

Re: Set minimum distance between objects inside flexbox

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

Re: Set minimum distance between objects inside flexbox

Post by heynen »

PS I have changed the image folder to test.zip (otherwise the download might not work)
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Set minimum distance between objects inside flexbox

Post by Pablo »

I'm sorry but I do not see any 'errors'. This is how flexbox works.
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: Set minimum distance between objects inside flexbox

Post by 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.
User avatar
crispy68
 
 
Posts: 2729
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Set minimum distance between objects inside flexbox

Post by crispy68 »

@heynan,

To have rounded corners with the border simply increase your border radius from 2% to 5% in your code.
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: Set minimum distance between objects inside flexbox

Post by heynen »

Thank you! Will try! Sounds good!
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: Set minimum distance between objects inside flexbox

Post by 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%).
Post Reply