I was not sure if I should post this in new thread or the previous thread I had. Please let me know and I will report it. This is my flex box practice…https://codepen.io/stribor45/pen/ZvxqdX and I have two questions…
Why do mine #one_1, #one_2 not taking green color and why aren’t they filling the width of its parent which is element #one.
Once I figure this out I will work on convert all those id’s into classes
Because #container div {} has higher specificity that #one_1 {} etc, both of which specify a background color.
Because of the 10px margin, which makes them wider than their parent.
As Ralph said they have lower specificity and would need to look like this to win out.
div#one_1,div #one_2
Do it now It will take seconds to do.
also please use !important sparingly as it will make things difficult to get around when doing troubleshoots because the specificity will confuse you and the browser!
Only every use !important as a last resort but even if you do have to use it alot than there is obviously bad coding involved.
ok I think I am starting to make some sense with flexbox but I have following question…
My image is not aligning at the center vertically with its container ( i don’t think it’s flex box related)
I also want to make some space between green item and image as well as spreading stars more evenly within the green item to align with images.
Images are placed on the baseline by default which is the same place that text is aligned and the space under the image would be the space where descenders are placed. If you want to collapse that space then either set image to display:block or set its vertical-align:to middle instead of baseline (the default).
Not quite sure what effect you want here?
The stars seem vertically aligned nicely and you could simply move the stars columns using a margin-left as required. Or you could add justify-content:space-around or justify-content:space-between to .container to spread out on the line.
It all depends what you want it to look like so I can’t really guess at that
I want to put some space between green and image. Yes of course I could use margin-left but I thought since image and the green div are children of container I could space them somehow.
Yes I gave you 2 alternatives in how to space them somehow
i.e.
You will need to clarify what the technical term “somehow” means to you? I could go on guessing for years and years and still not achieve what you had in mind. 
By somehow I meant space them by using one of the flexbox properties
Yes I gave you 2
justify-content:space-around or justify-content:space-between
If you apply those to the container they do what it says on the tin.
Whether or not that is what you wanted is another matter.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.