Wednesday, 20 April 2022

CSS display property && flex

 https://www.w3schools.com/cssref/pr_class_display.asp

https://www.w3schools.com/cssref/css3_pr_flex.asp

Flex:

The flex property sets the flexible length on flexible items.

Note: If the element is not a flexible item, the flex property has no effect.


Example

Let all the flexible items be the same length, regardless of its content:

#main div {
  -ms-flex: 1; /* IE 10 */
  flex: 1;
}



inlineDisplays an element as an inline element (like <span>). Any height and width properties will have no effectDemo ❯
blockDisplays an element as a block element (like <p>). It starts on a new line, and takes up the whole widthDemo ❯
contentsMakes the container disappear, making the child elements children of the element the next level up in the DOM
flexDisplays an element as a block-level flex container
gridDisplays an element as a block-level grid container
inline-blockDisplays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values
inline-flexDisplays an element as an inline-level flex container
inline-gridDisplays an element as an inline-level grid container
inline-tableThe element is displayed as an inline-level table
list-itemLet the element behave like a <li> elementDemo ❯
run-inDisplays an element as either block or inline, depending on context
tableLet the element behave like a <table> element
table-captionLet the element behave like a <caption> element
table-column-groupLet the element behave like a <colgroup> element
table-header-groupLet the element behave like a <thead> element
table-footer-groupLet the element behave like a <tfoot> element
table-row-groupLet the element behave like a <tbody> element
table-cellLet the element behave like a <td> element
table-columnLet the element behave like a <col> element
table-rowLet the element behave like a <tr> element
noneThe element is completely removed
initialSets this property to its default value. Read about initial
inheritInherits this property from its parent element. Read about inherit

No comments:

Post a Comment