Can we think this to be a kind of analog of bootstrap grid version, but in flex or flex-box?
I mean if we use such system then we can get the same desired result as in the bootstrap grid version?
(I mean the above examples can be used as a kind of framework.)
Flexbox is better for aligning components that are within a grid rather than using flexbox as a full page layout although it can be used for this. Flexbox relies on content so you often see flexbox pages jumping around when they load until the content dictates the size the flex item needs to be. I don’t see this an issue but clients tend to complain about this.
Flexbox unlike display:table and table-cells (or the new grid system) cannot create a relationship between rows and columns so is only another tool in the toolbox and not the overall solution. The new grid layout will be the ‘de facto’ tool for layout but will still need flexbox for components inside the grid to make them flex and adapt as required but within the specifications of the grid.
Grid layout will be its own grid so don’t use a framework for it. If you are going to use a framework for flexbox then please learn how to use flexbox first. Once you’ve learned flexbox you will find you don’t need the support of a framework anyway.
Now I have pointed 3 arrows here. Do you think that all this is a grid I means all those 3 boxes are Flex Grids, Right?
I mean it is not a 2 column layout, but a FLEX GRID. Right?
I don’t see any need for flex there. It’s a 2 column layout which can be done width the display:table and table-cell properties and be supported back to IE8. It can also be done with flex if older support is not required but doesn’t specifically have to be a flexbox layout,
If the items in your right column needed to flex so that no matter how many items you had they matched the height of the left column then yes you would need flex. If you are just stacking content in a column and not wanting it to keep track of the left column then you don’t need flex but of course you could still use it…
If you want to re-order the columns for small screen then you would need flex but of course you could just add the flex rule once you have resorted to a single column in your media queries anyway.
If you have a specific html source order but you want the elements in different positions then yes you do need flex.
It all depends on what your criteria are and whether you are supporting modern browsers or not.
Remember that a lot of the time there is no right or wrong (within reason) but the method you use does depend on the criteria that you set for your design and what you want to happen next.
Sir, You are brilliant not because you know web development at an expert level, but how easily you understand the person’s mind, and what mental hurdle or confusion the person is facing at the moment. Yes you are right sir →
If the items in your right column needed to flex so that no matter how many items you had they matched the height of the left column then yes you would need flex.
Please correct me If I am wrong. If we eliminate Card 3 - Card 6 → we will get the same grid structure, but as far as I know grids are quite flexible, but in the codepen link that I shared don’t you think so that the codepen that I shared defies the idea of grid because grids are self adjusting and here they are setting them right and left or this ok, and is quiet common in web development world.
This use of flex makes no sense at all.
It is a totally rigid layout made up of fixed size elements. It is 100% not responsive.
So although the line display: flex does appear in the css, it may as well not be there because it’s not being used at all because you fill the flex container with inflexible elements. Concrete in a jelly mould.
What is wrong?
This:-
width: 650px;
height: 280px;
This is exactly how not to do RWD. Avoid fixed widths, totally avoid fixed heights.
Keep things fluid and let content dictate the size.
Ok sir, if we convert them into %age then do you think we are good? I think the penmakers set some height in order to demonstrate the things. this is just my point of View.
Do you have other pen as suggestion if this is not a good one.
In your design the “right” seems to be rigidly fixed. should I also set max-width for “right” or that wont be a correct way. I mean what If I have to increase the width of the “right”?
Often there is no correct or incorrect way. It comes down to what works to make the desired behaviour, which is something I can only guess at.
In the example I use the flex shorthand property for grow shrink and basis to infer sizes without rigidly defining them. This allows for a quite flexible, fluid layout without the need for media queries. That is the beauty of flex.
The vids are not close captioned and there is no e-mail method of contacting the author. Must use social media. No apparent way to avoid mailing lists. May as well be a strike-out.
