I've been better researching the functionality (values) display and its features. I realized that she has many possibilities. Some pretty obvious and some rather complex for the novice developer.
I think these features are the most confusing for the novice developer:
flex inline-flex list-item run-in (this is one I've never seen used) table-cell How are they used?
Some of these features are essentials for responsive design?
Any good example of usage?
Hello!
I can suddenly clear up some of those doubts.
I would say none of these are "essential" for responsive design, but flex is a much used for such, nowadays, since it was made to facilitate fluid design.
• flex : Facilitates responsiveness and fluidity with new attributes that simplify things that are usually much more complex to achieve with a block. Example: It's very simple to vertically align elements in flex.
• inline-flex : I see it used much less, but I believe it should give flex functions to inline elements which are usually as text. I'm about to see it more used.
• list-item : Is the default for elements in list ul , li . The object will be formatted as a list.
• run-in : This is simply to align a header to the text. As in this example:
• table-cell : This is the table cell default.
The display queue property is the most important property of CSS to control the layout, the default value may vary from element to element, generally the default value is display:block or display:inline .
Below I will list only the functionality classified as more confusing features according to the question, to access a list with full functionalities and examples of use follow 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, to some extent it adapts the item in question to other flexible items.
inline-flex The difference between inline-flex and flex is that inline-flex does not make flex items display on a single line, it shows the flexible container inline as a whole.
list-item An element rendered with property list-item will have the same behavior as a block element, in addition this property will generate a marker (box), its style can be changed through property list-style
run-in The run-in property works as follows: If the run-in box contains a block box, it works as a block;
If a block box follows the run-in box, the run-in box becomes the first inline box of the block box.
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 might appear by forcing the position with other layout techniques. More information about the property run-in : CSS tricks run-in
table-cell Causes the element to behave as a <td>