flexbox question - Post ID 264998

User 2846109 Photo


Ambassador
341 posts

Just doing some flexbox tests. I have the flex setting to justify: space around
Shouldn't circles 3, 4, 5 be centered but with space between them? Right now they are further to the left for me.
Am I missing something? I'm sure it's something I'm doing wrong on my end.

Thanks for any help!
Jeff

ps. I couldn't attach a .rff file. Can we add that file format to the forum allowed files?
Attachments:
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 2699991 Photo


Registered User
4,782 posts
Online Now

Jeff wrote:
Just doing some flexbox tests. I have the flex setting to justify: space around
Shouldn't circles 3, 4, 5 be centered but with space between them? Right now they are further to the left for me.
Am I missing something? I'm sure it's something I'm doing wrong on my end.

Thanks for any help!
Jeff

ps. I couldn't attach a .rff file. Can we add that file format to the forum allowed files?


The circles need auto margins applying left & right
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

Jeff wrote:
Just doing some flexbox tests. I have the flex setting to justify: space around
Shouldn't circles 3, 4, 5 be centered but with space between them? Right now they are further to the left for me.
Am I missing something? I'm sure it's something I'm doing wrong on my end.

Thanks for any help!
Jeff

ps. I couldn't attach a .rff file. Can we add that file format to the forum allowed files?


Actually flexing applies to whatever is inside whatever it is you have flexed so although you have applied flex to the containers, which contain the text (they are centered nicely.) that has no effect on the containers within the column.

The column that holds the containers isn't flexed, so to center the containers, just requires the auto-margins left & right.

Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

My God, There are more containers than in Singapore Docks
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 379556 Photo


Registered User
1,533 posts

Nothing has been done wrong in the example given with the first post in this thread. I'm a flexbox novice, but I believe the problem is just a discrepancy between flexbox expectation and flexbox fact.

The width percentages of the two oblong images come to 94%, almost inevitably causing at least two rows. Googling 'flexbox last line' shows that the last line will be a problem with Wrap plus Space Around etc. This can be demonstrated by reducing the screen width sufficiently to cause three rows to appear. The expectation that the rows will 'space-around' is correct for lines 1 and 2, but incorrect for line 3.

The effect that seems expected would, I think, best be done by simply changing Space Around to Center, and applying percentage right and left margins to the objects for spacing if so wished.

Frank
User 2699991 Photo


Registered User
4,782 posts
Online Now

Frank Cook wrote:
Nothing has been done wrong in the example given with the first post in this thread. I'm a flexbox novice, but I believe the problem is just a discrepancy between flexbox expectation and flexbox fact.

The width percentages of the two oblong images come to 94%, almost inevitably causing at least two rows. Googling 'flexbox last line' shows that the last line will be a problem with Wrap plus Space Around etc. This can be demonstrated by reducing the screen width sufficiently to cause three rows to appear. The expectation that the rows will 'space-around' is correct for lines 1 and 2, but incorrect for line 3.

The effect that seems expected would, I think, best be done by simply changing Space Around to Center, and applying percentage right and left margins to the objects for spacing if so wished.

Frank


My god just apply auto margin left right to the circles 3,4,5 BOOOOOM there it is fixed no need worry about % here % there rows here rows there
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

When it shrinks down to maintain the proportions of 1 & 2 is impossible to maintain with the way the layout is presently structured, that requires a whole different structure, which has nothing to do with flexing,

Although Frank is also correct it depends on how you want them to be viewed, applying center instead of space around would bring them sort of closer together, so it depends on how you want them to appear, evenly spaced out with more space between (my way) or centered but closer together (unless you mess about with margins) (Franks Way)
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2846109 Photo


Ambassador
341 posts

Ok, I think I'm getting what you guys are saying. This was more a test to try to understand the way flexbox works in different situations as compared to trying to find a solution to a specific solution. I'll search up some articles on flexbox in these situations as well. Thanks for looking into the file for me!
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

You might find something useful here: http://flexbox.io/
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2846109 Photo


Ambassador
341 posts

Inger wrote:
You might find something useful here: http://flexbox.io/


Thanks! I'll check out those videos. :)
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.