Inline-flex and inline not working – HTML & CSS – SitePoint Forums

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.
image

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. : slight_smile:



3 I like it



Source link

Related post

NEP looks beyond academics to envisage character building in students, says Minister

NEP looks beyond academics to envisage character building in…

It aims to impart moral and ethical values ​​to every learner, says Dharmendra Pradhan It aims to impart moral and ethical…
Emirates News Agency – WGS report addresses how governments can create a more systematic and rigorous approach to skills trainings

Emirates News Agency – WGS report addresses how governments…

DUBAI, 2nd October 2022 (WAM) – A report published by the World Government Summit Organization identifies how today’s employers are failing…
Try one of the easiest Python 3 beginner courses for $40

Try one of the easiest Python 3 beginner courses…

Offer price and availability subject to change after publication. TL;DR: Starting October 2, you can sign up for the Premium Python…

Leave a Reply

Your email address will not be published.