Question using Flexbox in RFF - Post...

User 2765857 Photo


Registered User
614 posts

Hello all,
I apologize if this question may seem dumb as it is probably simple, I have been reading about Flexbox and have testing on a page for a few days. I like it and hope to get proficient enough that I can go right to using it with no problem. I took Inger's advise and also have looking at the 20 YouTube Flexbox course that was shown and can get good info from them, may be slower for me but slowly it sinks in. :rolleyes:
Now question I have is: When doing FLEXBOX as far as the ROW you don't give it a name ie. row-flexbox? You keep it blank? The COLUMN in Postion is FLEX ( no problem) now as far as the Container do I make one main container first in the column and in Display call it Flex? and than add different containers in the main container ie. 4 or 5 if needed? In those containers I than add the element such as Picture - am I wrong? I also start off in Flex as COLUMN and later at the higher BP I change to ROW ? Each Container in the Main Container would have a different Class name also ie. Container -1, Container-2 etc. and the width can be change for each am I wrong?
I did a sample using 4 pics on a page and it sees to work BUT not sure if it is the correct way.

OK will check later have to finish cleaning the snow and ice we got yesterday here spent 3 hours yesterday and had enough so will try and finish today :cool:
Ray
Ray aka Kreations
Since 1994 Chocolate bar wrappers for all occasions.
Since 1972 helping clients help "Discover Their Dream Vacation"
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

When you are working within RFF/RBB/RSD you can't make a row display flex, no matter what name you give it. The 'outermost' element that can be set to display flex is the column. You can have the column as the flex container, and all the elements directly in that column will be the flex items. If you have, say, a container inside the column, the container will be a flex item, but not the elements inside that container. To achieve that, you need to make the container also into a flex container.
So, you don't necessarily need a container inside a column to be able to have some images in rows, columns or whatever and have them displayed with equal distances, centered or so.

If you were working with code, e.g. in the Html Editor or some other editor not using a grid system, you could set anything to display flex, I think. Have you been watching the videos created by Wes Boss? He didn't use any grid system, so he could make any element into a flex container.

Oh, and BTW, there are no such things as 'dumb questions'. But you might risk getting some dumb answers. ;) We have all been newbies at some time.
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

Ray,

Here's a flexbox test project I built a while ago to help myself learn about flexbox in RFF. Feel free to look it over and change setting, etc. to see how they all change the final design.

I've put it up on http://exploration.coffeecup.com/ for now to see and here's the rff file.

Make sure you change the size of the window to see how the layout reflows for each example.

Jeff
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 2765857 Photo


Registered User
614 posts

Jeff wrote:
Ray,

Here's a flexbox test project I built a while ago to help myself learn about flexbox in RFF. Feel free to look it over and change setting, etc. to see how they all change the final design.

I've put it up on http://exploration.coffeecup.com/ for now to see and here's the rff file.

Make sure you change the size of the window to see how the layout reflows for each example.

Jeff
Thank you Jeff! I appreciate it, downloaded and was looking at the settings question: I see that on a Grid sample when I check the Column you have the class set as Set7 BUT I do see the Flex setting in the Postion Flex, so am I to think that I don't set the Column class to Flex then? But give it a name ie. column-sample ? Will look at it deeper later, BUT thank you again :lol:
Ray
Ray aka Kreations
Since 1994 Chocolate bar wrappers for all occasions.
Since 1972 helping clients help "Discover Their Dream Vacation"
User 379556 Photo


Registered User
1,533 posts

I am no Flexbox expert, but I have used it sufficiently to have picked up the following very basic matters regarding using Flexboxes in RFF, RBB and RSD. I typed the following before the preceding three posts appeared, but it may still perhaps be of some use even though it will overlap the useful preceding posts.

1. Position > Display > Flex applies to columns and containers, but not to rows (whether main-grid rows or subgrid rows).

2. Position > Display > Flex applies to a column or container, the elements within which are to be positioned in accordance with the Flex settings (i.e. Direction, Wrap etc. in the Position section - not the Flexbox section - of the Design panel) of that column or container.

3. The elements to be positioned as in item 2 above do not necessarily require any special settings, but there are some settings available for one or more of those elements in the Flexbox section of the Design panel. For example, if there were three such elements, one may assign to those elements Flexbox Order numbers, determining the order in which the elements are arranged.

4. It is possible to have some nesting. For example, one could have a Flex column having two or three containers to be positioned in accordance with the Flex settings of the column; one or more of those containers could be a Flex container controlling the positioning of elements within that container.

5. There are no special naming rules for classes etc. regarding Flex columns or Flex containers, or for the elements within them.

Frank
User 2765857 Photo


Registered User
614 posts

Inger wrote:
When you are working within RFF/RBB/RSD you can't make a row display flex, no matter what name you give it. The 'outermost' element that can be set to display flex is the column. You can have the column as the flex container, and all the elements directly in that column will be the flex items. If you have, say, a container inside the column, the container will be a flex item, but not the elements inside that container. To achieve that, you need to make the container also into a flex container.
So, you don't necessarily need a container inside a column to be able to have some images in rows, columns or whatever and have them displayed with equal distances, centered or so.

If you were working with code, e.g. in the Html Editor or some other editor not using a grid system, you could set anything to display flex, I think. Have you been watching the videos created by Wes Boss? He didn't use any grid system, so he could make any element into a flex container.

Oh, and BTW, there are no such things as 'dumb questions'. But you might risk getting some dumb answers. ;) We have all been newbies at some time.

Hello Inger,
I know you are busy and want to thank you for replying to my question. First YES I have been watching the Wes Bos videos up to #7, knowing the names he is using to describe what is going on is big help, thanks for the push to try and learn Flexbox, slowly getting it :) I see that he is using as you say No Grid System so that part was confusing but in time I should learn enough thanks to your help and Jeff and so many others!.

Just got in after another 2 hours chopping ice and than cleaning the rest of the driveway, would have been better with all snow and not the rain on top of snow than ice, BUT SPRING is coming soon - Hopefully :D

All that have helped me on the forum are so knowledgeable I thank you all!
Ray
Ray aka Kreations
Since 1994 Chocolate bar wrappers for all occasions.
Since 1972 helping clients help "Discover Their Dream Vacation"
User 2846109 Photo


Ambassador
341 posts

Ray,

The class names do not matter. Just pick something that works for you and your project. You can try changing the class names in my sample but you may need to update flexbox settings if they change.

The only things that matter specifically are the 'flexbox' settings and the 'position' settings in the design tab.
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 2765857 Photo


Registered User
614 posts

Frank Cook wrote:
I am no Flexbox expert, but I have used it sufficiently to have picked up the following very basic matters regarding using Flexboxes in RFF, RBB and RSD. I typed the following before the preceding three posts appeared, but it may still perhaps be of some use even though it will overlap the useful preceding...

Thanks Frank I printed the info you were kind enough to share and will go over it tomorrow when I go back to practicing learning Flexbox.
Thanks,
Ray
Ray aka Kreations
Since 1994 Chocolate bar wrappers for all occasions.
Since 1972 helping clients help "Discover Their Dream Vacation"

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.