How to adjust items inside a flex box? - Help

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
longman
 
 
Posts: 146
Joined: Sat May 19, 2018 1:23 pm

How to adjust items inside a flex box? - Help

Post by longman » Mon May 21, 2018 11:29 am

Hi guys,

I'd like to add (or have) only 5 items inside a Flex container, how do I do it? In the WBS file attached I can add many more, I do not wanna add more, and if I add more, I want the 6th and the rest items go to the next row within the same container.

moreover, when it goes to 768 breakpoints, I want the items to be adjusted in 2 items in each row within the flex contrainer, but right now its all adjusted in one per row when i make the window smaller.

I tried to work with options in the Flex container, but could not make it.

The WBS file is attached, ty!
Last edited by longman on Mon May 21, 2018 11:31 am, edited 1 time in total.

longman
 
 
Posts: 146
Joined: Sat May 19, 2018 1:23 pm

Re: How to adjust items inside a flex box? - Help

Post by longman » Mon May 21, 2018 11:30 am

I can not find the option Attachment in the post message box?

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

Re: How to adjust items inside a flex box? - Help

Post by Pablo » Mon May 21, 2018 11:55 am

I want the 6th and the rest items go to the next row within the same container.
This is only possible when the items have a fixed width, if the row is set to 'wrap' then all items that will not fit will automatically wrap to the next row.

Example:
http://www.wysiwygwebbuilder.com/suppor ... osaic.html

To share your your project:
upload the file to your website or another public server and include the link in your post

longman
 
 
Posts: 146
Joined: Sat May 19, 2018 1:23 pm

Re: How to adjust items inside a flex box? - Help

Post by longman » Mon May 21, 2018 1:11 pm

Pablo wrote:
Mon May 21, 2018 11:55 am
I want the 6th and the rest items go to the next row within the same container.
This is only possible when the items have a fixed width, if the row is set to 'wrap' then all items that will not fit will automatically wrap to the next row.

Example:
http://www.wysiwygwebbuilder.com/suppor ... osaic.html

To share your your project:
upload the file to your website or another public server and include the link in your post
Thanks Pablo. My item is not an image, its Cards, how do I make a card as fixed width? I can't see such option in Card properties.

I'll be regularly updating the page, so im gonna make a custom card item for my special contents, drag and drop it in the Flex container regularly.

Here is my WSB file https://expirebox.com/download/4f586f82 ... 8a0f4.html

All i wanna do is to have/add X number of item (As card) in the Flex container.

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

Re: How to adjust items inside a flex box? - Help

Post by Pablo » Mon May 21, 2018 1:15 pm

Thanks Pablo. My item is not an image, its Cards, how do I make a card as fixed width? I can't see such option in Card properties.
You can set the flexbox properties in the 'Flex box properties' of the object.
Image

http://www.wysiwygwebbuilder.com/flexbox.html

In your current settings you have set the flex-basis to 0%, so they will be all on the same row.
If you change this to (for example) to 33% then there will be 3 item per row.

Note that these options are for advanced users, so it may take some time to figure out the optimal settings (even for me).

longman
 
 
Posts: 146
Joined: Sat May 19, 2018 1:23 pm

Re: How to adjust items inside a flex box? - Help

Post by longman » Mon May 21, 2018 6:17 pm

Pablo wrote:
Mon May 21, 2018 1:15 pm
Thanks Pablo. My item is not an image, its Cards, how do I make a card as fixed width? I can't see such option in Card properties.
You can set the flexbox properties in the 'Flex box properties' of the object.
Image

http://www.wysiwygwebbuilder.com/flexbox.html

In your current settings you have set the flex-basis to 0%, so they will be all on the same row.
If you change this to (for example) to 33% then there will be 3 item per row.

Note that these options are for advanced users, so it may take some time to figure out the optimal settings (even for me).
Got it, thanks! It indeed takes some time ) look, I wanna make 3 items in Default view and then 2 items in 768 view, is it possible? I worked on it for an hour with no success. Flex-basis is applied on item, I wish i could apply it on whole Flex container in each breakpoint?

If I add flex basis 40% on each item in 768 breakpoints, then it works, but it will be so much work everytime to change flex basis % of items in 768 breakpoints, considering that i'll update the site regularly.

For 320 breakpoints, I made Rex direction as Column, so it automatically becomes one item per row, no problem with 320 breakpoint items.

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

Re: How to adjust items inside a flex box? - Help

Post by Pablo » Mon May 21, 2018 6:25 pm

I wanna make 3 items in Default view and then 2 items in 768 view, is it possible?
Did you check out the template I suggested?

longman
 
 
Posts: 146
Joined: Sat May 19, 2018 1:23 pm

Re: How to adjust items inside a flex box? - Help

Post by longman » Tue May 22, 2018 6:12 am

Pablo wrote:
Mon May 21, 2018 6:25 pm
I wanna make 3 items in Default view and then 2 items in 768 view, is it possible?
Did you check out the template I suggested?
Yes, I spent the whole day adjusting items and flex containers, i just can't make what i want :( Its tricky options

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

Re: How to adjust items inside a flex box? - Help

Post by Pablo » Tue May 22, 2018 6:28 am

I wish I had the time to do it for you, but at the moment I am very busy.

Note that you can have different flex values in breakpoints so that should give you the possibility to have a different number of items per row.

Andrew Swinfield
 
 
Posts: 9
Joined: Sat Aug 19, 2017 7:22 am

Re: How to adjust items inside a flex box? - Help

Post by Andrew Swinfield » Sat Sep 01, 2018 8:17 pm

Hi I have a similar problem, I have looked at the sample you supplied and in FLEXI CONTAINER if you put 3 pictures in a flexi container and set it to wrap the pictures will go underneath each other as the screen gets smaller, however this does not happen if you put 3 cards in and set it to wrap. But you can set the cards height to be fixed which is good.

If you use a layout grid with 3 sections and put a card in each one as the screen get smaller the cards will go underneath one another, however I cannot seem to make the cards all the same height it does not work. I do not use break points at all, and do not wish to. Is there a solution. Thanks

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

Re: How to adjust items inside a flex box? - Help

Post by Pablo » Sat Sep 01, 2018 9:07 pm

To be able to help you, i need to see what you have done.
https://www.wysiwygwebbuilder.com/forum ... 10&t=82134

Note that in a layout grid, items cannot be made the same height like in flexbox.

Andrew Swinfield
 
 
Posts: 9
Joined: Sat Aug 19, 2017 7:22 am

Re: How to adjust items inside a flex box? - Help

Post by Andrew Swinfield » Sat Sep 15, 2018 7:50 am

thanks fix it now

Post Reply

Who is online

Users browsing this forum: No registered users and 3 guests