Is it possible to use display block and flex together?

Asked

Viewed 37 times

0

I recently saw an Indian make a navigation menu using HTML,CSS,JS but what intrigued me was he used display: block and display: flex in the same element. Maybe he made a mistake because until then I know that the last one to be declared is what gets the application. I even did tests but the last one is always applied!

Then the question becomes: it is possible to use these 2 display in the same element?

css
  • 3

    In the same element there is no way. Repeated attributes follow the rule of specificity to define which will be used. You can see this by "inspect element" too.

  • 2

    The display has two variants, one inside and one outside. What I mean is that an element that receives a display property can affect how children behave, and/or how it behaves in relation to adjacent elements. An example of this is the display: inline-flex This display leaves the elements with inline display in relation to the siblings, but the children behave as if the father were flex. In short, the element becomes inline outwards and flex inwards at the same time. But two display property in the same element, the one that comes last subscribes to the previous

1 answer

-2


Before knowing whether it is possible or not we should know what each one does, be it Block or Flex

What does the display: block?

Causes the HTML element to be rendered as block as with the paragraphs and the headings are.

Example of application in the page below:

Demonstration of how the block style is displayed on the page.


What does the display: flex?

It is a CSS3 feature that serves to "shape" and/or organize elements in containers flexibly according to your needs.

Example of application in the page below:

After all, to use both properties together?

It is not possible to use them in the same element together. Repeated attributes follow the rule of specificity to say which one will be used. As the user @Rafael Tavares mentioned, you can clearly see by Devtools (or Browser Element Inspector)

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.