LeonLatex Posted July 15, 2022 Share Posted July 15, 2022 Remember that when you read this, I am one of those who grew up in static web design/development from 1992 - 2008-2010, and who only just got to know the concept of dynamic website and dynamic design/layout when it comes to elements on a page. That's why I ask. To get me further and into the same path that you who have followed for the last 12-15 years have done. So please take that into consideration when reading my questions. I have a gap of 12-15 years and fill. Therefore, no question is too stupid even if you perceive it that way. Please copy my questions as "quoted" so that you who answer me answer me under each question. Another thing I humbly ask is not to be bullied because I sometimes do not have perfect English. I thought this was a page for help with web development and PHP programming-related questions, and not a page for a spelling contest. So bear with me. There will come more questions from me about the subject I am into now. There will come more threads (I think). Anyway, no hard feelings. Just think people make themselves terribly small with such comments. Anyway, I really appreciate you and the help I get in here. You are a good bunch of skilled developers and programmers. I assume that there will be more such questions in more and new threads eventually. This is what I'm trying to do at the moment. Here are my questions: - Should all web pages contain a container that bakes in and holds together the design/elements of a web page? I mean in the form of a wrap/wrapper? This is something I find to read about flex/flexbox:Quote: You need a content-first design: Flexbox is the ideal layout system for creating web pages if you do not know exactly what your content will look like, so if you want everything to just fit, flexbox is perfect for it . By using floats we are limited to placing objects to the left or right, but by using flexbox we can modify our models in all four directions. Flexbox is a new concept in CSS to achieve a responsive website with some important features of flexbox. We should use flexbox over floats. Quote end. - Is it to understand that you do not need to specify anything other than height: to specify the height of your layout because the width will be automatically set/adjusted by flex/flexbox? - Is wrap/wrapper the pond as a flex container? - Are the box model and flexbox the same? - What is meant by gap in connection with flex-container? - Is it a sin against the "concept flexbox" to enter the values in percent? If so, what is allowed and considered valid? What is fundamentally important as the fundamentals around setting up a new project that should be dynamic and flexible in terms of different screen sizes/types and resolution? (laptop/computer, mobile, tab, etc.) As I have tried to make Barand understand, I am very happy to have full control myself. Therefore, frameworks such as W3-CSS and BootStrap are actually banned. I clearly see the benefit of the time savings that lie in it, and I have tried it and use it from time to time. I have found that writing the right CSS is much more important and has some nerve in it of having professional pride. Therefore, the most important thing for me now is to learn how to write correct code and not learning one or more frameworks. Wish you all a excellent mid day, evening or afternoon. Depending on where in the world you are. Quote Link to comment https://forums.phpfreaks.com/topic/315048-flex-flexbox-layout/ Share on other sites More sharing options...
requinix Posted July 15, 2022 Share Posted July 15, 2022 1 hour ago, LeonLatex said: - Should all web pages contain a container that bakes in and holds together the design/elements of a web page? I mean in the form of a wrap/wrapper? There is no "should" here. It's like asking whether you "should" swing a hammer with your left hand or your right hand: the majority of people will probably be using their right hand because that works for them, but as long as you're doing a good job of it, there's nothing that says you can't use your left. IMO, for the most part if you need a container (like for background styling or padding/margins or as a position:relative-ed parent) then you can probably use the <body> for it. That can be styled just as easily as a <div>. 1 hour ago, LeonLatex said: This is something I find to read about flex/flexbox:Quote: You need a content-first design: Flexbox is the ideal layout system for creating web pages if you do not know exactly what your content will look like, so if you want everything to just fit, flexbox is perfect for it . By using floats we are limited to placing objects to the left or right, but by using flexbox we can modify our models in all four directions. Flexbox is a new concept in CSS to achieve a responsive website with some important features of flexbox. We should use flexbox over floats. Quote end. - Is it to understand that you do not need to specify anything other than height: to specify the height of your layout because the width will be automatically set/adjusted by flex/flexbox? You need to specify what you need to specify. If you need a height then use a height. If you need a width then use a width. With CSS, remember one rule of thumb: less is more. Start with a minimal amount of CSS and only add when you need to correct or improve anything. The more CSS you add, the more complicated it gets, and the more likely your changes will be creating problems instead of solving them. 1 hour ago, LeonLatex said: - Is wrap/wrapper the pond as a flex container? What? 1 hour ago, LeonLatex said: - Are the box model and flexbox the same? Completely different things. The box model is a general description of how sizes and borders and margins and stuff work together. For instance, "if you specify a width then does that include the border?" Flexbox is a technique for layout, like grid display (newer than flexbox) or nested <div>s (older) or tables (much older). 1 hour ago, LeonLatex said: - What is meant by gap in connection with flex-container? What gap? What connection? 1 hour ago, LeonLatex said: - Is it a sin against the "concept flexbox" to enter the values in percent? If so, what is allowed and considered valid? Percentages are fine if you want relative measurements. But learn a little bit about all the different units available - because there are a lot more than most people know, and many of those are more appropriate than percentages. 1 hour ago, LeonLatex said: What is fundamentally important as the fundamentals around setting up a new project that should be dynamic and flexible in terms of different screen sizes/types and resolution? (laptop/computer, mobile, tab, etc.) Coming up with a responsive design that supports large desktops, small laptops, and mobile devices. Quote Link to comment https://forums.phpfreaks.com/topic/315048-flex-flexbox-layout/#findComment-1598264 Share on other sites More sharing options...
LeonLatex Posted July 15, 2022 Author Share Posted July 15, 2022 (edited) 4 hours ago, requinix said: There is no "should" here. It's like asking whether you "should" swing a hammer with your left hand or your right hand: the majority of people will probably be using their right hand because that works for them, but as long as you're doing a good job of it, there's nothing that says you can't use your left. IMO, for the most part if you need a container (like for background styling or padding/margins or as a position:relative-ed parent) then you can probably use the <body> for it. That can be styled just as easily as a <div>. Ok, but i thought (a lot of thinking and thoughts here now) the wrapper was to keep the elements in place/keep them in the desired place (or something like that). Else. I expressed my self a little wrong, and I do that sometimes because of bad English, but I try my best to be so correct as possible. You need to specify what you need to specify. If you need a height then use a height. If you need a width then use a width. With CSS, remember one rule of thumb: less is more. Start with a minimal amount of CSS and only add when you need to correct or improve anything. The more CSS you add, the more complicated it gets, and the more likely your changes will be creating problems instead of solving them. Yes like with everything else. Less is more What? Where did that "pond" come from. "I meant the same as....." Completely different things. The box model is a general description of how sizes and borders and margins and stuff work together. For instance, "if you specify a width then does that include the border?" Flexbox is a technique for layout, like grid display (newer than flexbox) or nested <div>s (older) or tables (much older). No. I just learned from you that the box model described size, borders and margins for example, or? What gap? What connection? Sorry. Bad translation by me. That's what's happen's when a Norwegian guy translates directly from Norwegian to English without thinking. What I meant was: I do not quite remember what it was, but there was something in the connection between a gap and flex-box. Think there was something about closing gaps between elements. Percentages are fine if you want relative measurements. But learn a little bit about all the different units available - because there are a lot more than most people know, and many of those are more appropriate than percentages. For some reason, I have learned to use percentages, and px as well. For me, that is so easy to use. So I use % and px because that's is feeling so natural for me. And I understand the metric system because that is what's normal in my part of the world. Therefore in use millimeters and centimeters. Came up with a responsive design that supports large desktops, small laptops, and mobile devices. So far I have understood that😉🤪The case is.... I was asking what the fundamentals are? Like a what to remember to use list to get the site scalable But I guess you already answered the question. Less is more. Possibly I have misunderstood everything in terms of "FLEX", "FLEXBOX" and "FLEXIBILITY". I thought it had to do with scaling and that the elements stayed in place. But then it turns out that it has more to do with "size, borders and margins" than a correctly scalable website regardless of mobile, tab, pad or PC / Mac. Edited July 15, 2022 by LeonLatex Quote Link to comment https://forums.phpfreaks.com/topic/315048-flex-flexbox-layout/#findComment-1598268 Share on other sites More sharing options...
Strider64 Posted July 15, 2022 Share Posted July 15, 2022 (edited) I will throw a monkey wrench into this discussion as I find using grids along with media queries so much easier when it comes to designing whole websites. A short example : /* Approximately the size of an iPad 768px */ @supports (grid-area: auto) { @media screen and (min-width: 48em) { .site { display: grid; grid-template-columns: 1fr; grid-template-areas: "nav" "main" "sidebar" "footer"; justify-content: center; } .nav { grid-area: nav; display: flex; justify-content: space-between; } .nav-title { display: inline-block; } .sidebar { grid-area: sidebar; } If you design for small screens (smartphones) without media queries then work you way up to larger screen devices the CSS is so much more manageable as you are using less CSS and it's easier to change to the design around to by just changing a few things around. Incorporating some Flexbox where Grids doesn't handle it so easy into the mix makes it even better. Edited July 15, 2022 by Strider64 Quote Link to comment https://forums.phpfreaks.com/topic/315048-flex-flexbox-layout/#findComment-1598269 Share on other sites More sharing options...
kicken Posted July 15, 2022 Share Posted July 15, 2022 1 hour ago, LeonLatex said: Ok, but i thought (a lot of thinking and thoughts here now) the wrapper was to keep the elements in place/keep them in the desired place (or something like that). Else. I expressed my self a little wrong, and I do that sometimes because of bad English, but I try my best to be so correct as possible. The way I understood your question here was if you should have a wrapper around the entire content of your page, ie: <body> <div id="wrapper"> Your content all goes here </div> </body> Doing such a thing is largely unnecessary I believe. The body tag works just fine as a wrapper. I believe in the past such a thing was common to fix the width of a page and center it in the view port as applying the necessary styles directly to <body> didn't work. I believe these days those issues have been resolved, and that design isn't very common anymore anyway. There might still be reasons one could want to do such a thing, but I can't think of any. In any case, it's not something you should inherently do, only do it if you have a reason. 1 hour ago, LeonLatex said: Where did that "pond" come from. "I meant the same as....." If my understanding if your wrapper question is accurate, then no they are not the same. The flex container is just something you apply display: flex; to in order to activate a flex layout. You can't use flex without it, but it doesn't have to wrap the whole site, just whatever elements you want to be part of the flex. I typically use flex for smaller components in a page rather than as a larger page layout tool. I find myself tending to use grid over flex these days though. 1 hour ago, LeonLatex said: No. I just learned from you that the box model described size, borders and margins for example, or? The box model is the low-level workings of how elements are sized, how padding, margins, and borders work, etc. Flex / grid are higher-level layout tools that let you control how elements are positioned in the page. 1 hour ago, LeonLatex said: Sorry. Bad translation by me. That's what's happen's when a Norwegian guy translates directly from Norwegian to English without thinking. What I meant was: I do not quite remember what it was, but there was something in the connection between a gap and flex-box. Think there was something about closing gaps between elements. Flex allows you to easily put things in a single line without any gaps if you want, or you can easily distribute items so that they are evenly spaced with a consistent gap. Not sure if that's what you were wondering about or not. You may have to dig up whatever prompted that question and re-ask. 1 hour ago, LeonLatex said: The case is.... I was asking what the fundamentals are? Like a what to remember to use list to get the site scalable But I guess you already answered the question. Less is more. Possibly I have misunderstood everything in terms of "FLEX", "FLEXBOX" and "FLEXIBILITY". I thought it had to do with scaling and that the elements stayed in place. But then it turns out that it has more to do with "size, borders and margins" than a correctly scalable website regardless of mobile, tab, pad or PC / Mac. Flex and grid are about being able to essentially scale / re-arrange your site according to the available space. Flex allows elements to size them selves according to the available space while remaining grouped together. This makes it simpler to do something like create a bar the spans the entire page width and divide it into sections that can scale proportionally. You can do the same with floats and px and % but it's more difficult and error prone. Grid is similar to old table designs in that you define a grid of squares and can position your content into / across specific squares. -- As an aside, it's easier to understand posts if you put your responses outside of quotes rather than inside them. You can quote part of a post by highlighting the text and clicking the popup Quote Selection button, or just quote the whole post then edit the quote down to what you want. Then click below the quote in the editor to move the cursor outside of it and begin your response. Quote Link to comment https://forums.phpfreaks.com/topic/315048-flex-flexbox-layout/#findComment-1598270 Share on other sites More sharing options...
LeonLatex Posted July 16, 2022 Author Share Posted July 16, 2022 In a way, but what I meant was whether it is required according to the standard that a container / wrapper is required on all web pages you develop. In my head it is there to keep everything so that nothing slips out or changes due to scaling problems. Now I have been told that it is to control sizes and borders and margins and stuff work together. This is where I start to misunderstand, or where I have started to misunderstand and thought that flex and flex box are something that holds the page together, so it does not slip out at different resolutions. I have mentioned this before. Now that I have obtained the reference guide for CSS3, this will be the end of it. How you are telling me and how you are describing things for me now are very easy for me to understand. Thank you. So the box model is kind of a library to everything for the box/div element from float, margin, padding, height and width to rotation and visibility. I understood that from the ref. guide. You see how usefull that can be? Flex/Grid.... This was some of what i meant when i was talking about "gap" a previous comment or posting. I dont need to dig and ask up again the same questions over and over again. A little history now.... 🙂 In 1996, I bought a poster called the Quick Reference Guide to CSS1.0. After I started up (1,5 years ago) and tried to crawl back to the developer I once was in most areas, which is not easy at the age of 50, and everything is new after between 12 and 15 years outside the industry that does not make it any easier + that most have been replaced with new ones. It's a hell. Things take longer, and you have a harder time learning, also that things do not stick as easily to the brain as before. I've been looking for the same guide that taught me CSS back then for a long time, just as a guide for CSS3. Today I found the same guide for CSS3. Just that it is a PDF file. I'm overjoyed at this. In a few days, I can hang this ref. Guide for css3 on the wall in front of me as I did in 1996 and learn it in the same way as then. Exactly, i can read it the whole time without reading a book. I have ordered a poster of the CSS file from a local printing company in the dimensions 1.5 X 1.5 meters. Now there's a glimpse of hope😊🤓🤪👍 In a way, but what I meant was whether it is required according to the standard that a container/wrapper is required on all web pages you develop. In my head, it is there to keep everything so that nothing slips out or changes due to scaling problems. Now I have been told that it is to control sizes and borders and margins and stuff work together. This is where I start to misunderstand, or where I have started to misunderstand and thought that flex and flexbox are something that holds the page together, so it does not slip out at different resolutions. I have mentioned this before. Now that I have obtained the reference guide for CSS3, this will be the end of it. Quote Link to comment https://forums.phpfreaks.com/topic/315048-flex-flexbox-layout/#findComment-1598271 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.