CSS3 four adaptive keywords-fill-available, max-content, min-content, fit-content, css3fill-available

CSS3 four adaptive keywords-fill-available, max-content, min-content, fit-content, css3fill-available
Previous

Generally, there are two kinds of self-adaptation: full free space and shrinking to content size. CSS3 defines the two cases as 'fill-availabel 'and 'fit-content' respectively '. In addition, more fine-grained 'min-content' and 'max-content' are added '. These four keywords can be used to set the width and height attributes. This article will detail the four adaptive keywords in CSS3.

[Note] the IE browser does not support this function. You must add the-webkit-prefix to the webkit kernel browser.

 

Fill-available

Width: fill-available indicates that the available space is fully occupied.

For example<div>Element,<div>ElementwidthPerformance isfill-availableAutomatically fills up the remaining space

Appearsfill-availableThe value of the keyword value is that 100% of the elements can be automatically filled not only inblockHorizontal elements can also be applied to other elements.

In the following example, the width of the inline-block element is full.

<Style> div {background-color: pink; display: inline-block; width:-webkit-fill-available ;} </style> <div> the blue ideal of a match </div>

Similarly, height also has this feature

In the following example, the height of the div element is full of the available height.

<Style> div. inner {background-color: pink; height:-webkit-fill-available ;}</style> <div style = "height: 100px; "> <div class =" inner "> the blue ideal of a match </div>

High Layout]

Therefore, fill-available can be used to easily implement high-level layout.

<style>.inner{  width:100px;  height:-webkit-fill-available;  margin:0 10px;  display: inline-block;  vertical-align: middle;  background-color: pink;}</style><div style="height: 100px;">  <div class="inner">HTML</div>  <div class="inner">CSS</div>  <div class="inner">JS<br>jQyery<br>Vue</div></div>

 

Fit-content

Width: fit-content indicates that the element width is reduced to the content width.

Below is an instance

<Style> div {background-color: pink; width:-webkit-fit-content ;}</style> <div> the blue ideal of match </div>

[Horizontal center]

　　width:fit-contentIt can achieve the element shrinkage effect while maintaining the original block horizontal state, so you can directly usemargin:autoThe element orientation is self-adaptive and the center effect is achieved at the same time.

<Style> div {background-color: pink; width:-webkit-fit-content; margin: auto ;} </style> <div> the blue ideal of a match </div>

Similarly, height also has this feature, but it is not commonly used.

 

Min-content

Width: min-content indicates that the width of the element with the smallest internal element width is used as the final container width.

First, you must understand what the "minimum width value" means. Replacement element. The minimum width value of the sample image is the width of the image. For text elements, if all are Chinese, the minimum width value is a Chinese width value, because the default English word does not wrap, the minimum width may be the width of the longest English word.

<Style>. outer {width:-webkit-min-content ;}</style> <div class = "outer"> <div style = "height: 10px; width: 100px; background: lightgreen "> </div> <div style =" background-color: pink; "> small match Blue ideal </div>

 

Max-content

Width: max-content indicates that the width of the element with the largest internal element width value is used as the final container width. If the text appears, the text does not wrap.

<Style>. outer {width:-webkit-max-content; border: 1px solid black ;}</style> <div class = "outer"> <div style = "height: 10px; width: 100px; background: lightgreen "> </div> <div style =" background-color: pink; "> small match Blue ideal small match blue ideal small match blue ideal small match </div>