Hey… I have been working on Project 2 - The Survey, and my code got really messy. So I found myself wanting to get a better idea of the structure and kind of set myself up with some templates and snippets to help keep things as clean as possible. Also, I really have been struggling with Flex and Grid. Not so much on the differences, but really on how to get things to be where I want them to be.
I created this Pen … https://codepen.io/bgq007/pen/yEqQWw and I was hoping that some people might take a look and really look at some of my comments in the CSS section.
My idea was pretty simple, I thought… I took the CSS for the Bootstrap “well” class and apply it to everything so I could see where they were. Also, to “label” the areas so I knew what was what. I nested a DIV under the HTML sections even though I knew they were the same. My thought here was that I would attempt to always leave the generic HTML structure in place and nest everything in DIVs so if I needed to apply some global CSS to a section, I could always have those built in sections available.
When I got to my Flex area I ran into a bunch of problems. First, the “well” class wouldn’t work. I copied and pasted from a local document because I was having trouble there too. Eventually after scrapping the “well” class in the Flex area and manually retyping it all and changing the CSS I got what I wanted for visual boxes. But if you look at the Pen, you will see something that is stumping me. The Flex Container has a black border. The “label” is inside the box and that is cool with me. The Flex Box has a red border and the label is once again inside and that is fine with me.
The issue is, the label for the Flex Box is being considered a Flex Item (blue box and label inside… ok) and I can’t figure out why. Realistically speaking, it makes sense because it is content inside the box and so are the items, but why is it not sitting above the Flex Items like in every other “well” above it? The Red Box for the Flex Box isn’t sitting next to the Flex Container label.
Also, please do read my comments in the CSS because as I was searching for answers I came across another Pen doing something similar and they have align-items justify-content and align-content and I don’t recall the latter being part of the course here. How is align-content and align-items different? (I know I need to read on my own, but wanted to put it out here in addition.)
Thanks and I am looking forward to a good discussion.
NOTE: I changed this back to General because I am not asking about a Project. I am just having a general conversation. Maybe it should be placed in HTML / CSS but definitely not Project Feedback.