Page 1 of 1

Cards in Flex Container shall not fill width when wraping

Posted: Mon Nov 18, 2019 4:12 pm
by Bluesman
Hi Pablo or other :) Wonder how to make the one wraping card to not fill the width? Having four cards in a Flex Container I have made them wrap when entering a setted min width. But is it possible to set a max width for the card so it will not fill max width of the Flex container when wraping to next row?

Re: Cards in Flex Container shall not fill width when wraping

Posted: Mon Nov 18, 2019 4:19 pm
by Pablo
The flexbox properties can be used to control the size behavior of card and other elements inside a flex container.

Re: Cards in Flex Container shall not fill width when wraping

Posted: Mon Nov 18, 2019 5:09 pm
by Bluesman
Hi Pablo, thanks for answering. I'm trying all settings (I think) but can't figure out how to not make the card that wraps down when shrinking the page to fill out the width?? Can you please give me a hint which setting will prevent the card from being full width.
Setted the min width so it wraps when the cards reach it, but must have a max width for the card that has wrapped down.

Re: Cards in Flex Container shall not fill width when wraping

Posted: Mon Nov 18, 2019 6:12 pm
by Pablo
I'm sorry, I do not have standard settings for hits. For me, this would also take some time to figure out.
Note that you can have different settings in breakpoints.

Re: Cards in Flex Container shall not fill width when wraping

Posted: Mon Nov 18, 2019 6:14 pm
by Bluesman
Ok, gracias Pablo.

Re: Cards in Flex Container shall not fill width when wraping

Posted: Mon Nov 18, 2019 10:54 pm
by crispy68
Hey bluesman,

to get your cards to work, just set the Flex Grow and Flex shrink to 0 and make the Flex basis box blank

Image

When I previewed it, once the max-width is reached it flips to the next line. I have them all centered. See below:

Image

Re: Cards in Flex Container shall not fill width when wraping

Posted: Tue Nov 19, 2019 12:19 pm
by Bluesman
crispy68 wrote: Mon Nov 18, 2019 10:54 pm Hey bluesman,

to get your cards to work, just set the Flex Grow and Flex shrink to 0 and make the Flex basis box blank

Image

When I previewed it, once the max-width is reached it flips to the next line. I have them all centered. See below:

Image
Hi crispy, thanks for your solution... thought I tested that, but clearly not... :) Shall do an attempt now. Muchas Gracias.

Re: Cards in Flex Container shall not fill width when wraping

Posted: Tue Nov 19, 2019 12:27 pm
by Bluesman
Muchas Gracias crispy... it works with some fine tuning :D

Re: Cards in Flex Container shall not fill width when wraping

Posted: Tue Nov 19, 2019 1:51 pm
by Bluesman
crispy68 wrote: Mon Nov 18, 2019 10:54 pm Hey bluesman,

to get your cards to work, just set the Flex Grow and Flex shrink to 0 and make the Flex basis box blank
Hi again crispy... just a note :) Works good with the "Flex container" but I tried it with the new "Card container" and seams that you can not do this settings... when pressing OK it goes back to stnd settings :roll: As I told just a note... do you think this is a bug?

Re: Cards in Flex Container shall not fill width when wraping

Posted: Tue Nov 19, 2019 2:06 pm
by Pablo
When using a card container, the flex box settings of cards are automatically reset to the default values.
This is intentional behavior to simplify the usage of the card container.

Note that the card container is basically a flex container with lessor options. So, if you need more control then use the flex container instead.

Re: Cards in Flex Container shall not fill width when wraping

Posted: Tue Nov 19, 2019 2:54 pm
by Bluesman
Pablo wrote: Tue Nov 19, 2019 2:06 pm When using a card container, the flex box settings of cards are automatically reset to the default values.
This is intentional behavior to simplify the usage of the card container.

Note that the card container is basically a flex container with lessor options. So, if you need more control then use the flex container instead.
Ok thanks Pablo. Was just a reflection. Though I think if the settings that works in the Flexbox Container should work in the Card Container (not be resetted) after closing (ok), you could take bennefit of the possibillity for the breakpoint setting in the "Card Container".

Re: Cards in Flex Container shall not fill width when wraping

Posted: Fri Nov 29, 2019 7:51 am
by chan2015
I am trying out cards & flex container ... and I cannot find the "flexbox" in the toolbox or the flex settings inside a card.

Image
Image

I cannot find the place to set the card's width. When I drag a card inside a flex container, it will take full width ...

Re: Cards in Flex Container shall not fill width when wraping

Posted: Fri Nov 29, 2019 7:52 am
by chan2015

Re: Cards in Flex Container shall not fill width when wraping

Posted: Fri Nov 29, 2019 9:26 am
by chan2015
I found it after reading http://www.wysiwygwebbuilder.com/flexbox.html ... :)
I am hoping that I can place cards (each card contain an image of a product & its description) into the flex container ... so that at all viewports ... the cards automatically will rearrange to fit the viewport size without needing any breakpoints... let's see if this work.