Inline-flex and inline not working – HTML & CSS – SitePoint Forums
It does not go to the same level
You have an additional div (which are by default display: block) in there.
It is easier to see if you are adding a schema to the div element. This long line is an empty div
1 I like it
I do not know. What were you trying to achieve?
Labeling is different from the first post, so it’s hard to know what you were trying to do …
The online grid container is not at the same level as the flexible container.
Do you mean that?
the screen: flex; it had to be screen: inline-flex;
1 I like it
If you mean they don’t line up horizontally, they won’t because the flexible element is a block container and the inline items that follow will start on a new line.
If the flexible container were an in-line flexible container, they would both sit side by side, as both would be in-line flexible and in-line grid containers. However, this is not the way to approach this and if you want columns on the screen, you would use a main container (flex or grid) to hold the columns.
I also see that you are still encoding fixed heights for your containers and this is something I will rarely do for items that contain fluid content like text. This is because the container can never grow and, in fact, your height: 100vh in .container means that your center section is too high to start the graphics window (because you have a header on it). When you finally add more content than 100vh, the item will never grow and simply overflow.
You should use min-height in most cases, but in your case you will need a page wrapper with min-height: 100vh and then the header. the middle and footer are included in the wrapper. You can then automatically (flex or grid) stretch the middle section between the header and footer to provide a high initial graphic window design that can grow with the content.
As Dave said above, it all depends on what you want to achieve though Generally you wouldn’t mix inline-grid and inline-flex on the same levels, as that makes little sense. You can nest the flex within the grid or vice versa, but you would usually create the general framework with a technique instead of mixing things up willingly.
3 I like it