How does the display property work?

Asked

Viewed 339 times

10

I’ve been researching the functionality better (values) display and its features. I noticed that it has many possibilities. Some very obvious and others somewhat complex for the beginner developer.

I believe these features below are the most confusing for beginner developer:

  • flex
  • inline-flex
  • list-item
  • run-in (this is one I’ve never seen used)
  • table-cell

How they are used?

Some of these features are essential for responsive design?

Some good example of use?

css css3
  • 2

    Interesting question, young man .+ 1

  • @Wallacemaxters thank you so much

2 answers

9


Hello! I can suddenly clear up some of those doubts. I would say that none of these are "essential" to responsive design, but the flex is a widely used one for such nowadays, as it was made to facilitate fluid design.

• O flex: Facilitates responsiveness and fluidity with new attributes that simplify things that are usually far more complex to achieve with a block. Example: It’s very simple to vertically align flex elements.

• O inline-flex: I see it being used much less, but I believe it should give flex functions for elements inline which are usually like text. I’m about to see it used more.

• O list-item: This is the default for list elements ul, li. The object will be formatted as a list.

• O run-in: This is simply to align a header to the text. As in this example:

inserir a descrição da imagem aqui

• O table-cell: It is the default of table cells.

5

The estate display is the most important property of CSS to control the layout, the default value can vary from element to element, generally the default value is display:block or display:inline.
Below I will list only the features classified as more confusing features according to the question, p/ access a list with all the functionalities and their use examples follows the link: w3schools css display

  • flex

The flex property specifies the length of the item, relative to the rest of the flexible items within the same container, in a way it adapts the item in question relative to the other flexible items.

  • inline-flex

The difference between inline-flex and flex is that inline-flex does not cause flex items to be displayed in a single row, it shows the flexible container online as a whole.

  • list-item

An element rendered with the property list-item shall behave in the same way as block, additionally this property will generate a bookmark(Marker box), its style can be changed through the property list-style

  • run-in

The estate run-in works as follows: If the run-in box contains a box block, functions as a block; If a box block follow the box run-in, the run-in box becomes the first box inline of the box block. This property is used for example, to join a header to a text below it without harming the semantics in question and to prevent future errors that could appear forcing the position with other layout techniques. P/ more information about the property run-in:CSS Tricks run-in

  • table-cell

Makes the element behave like a <td>

Browser other questions tagged css css3

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