CSS fit-content和max-content有什么区别? [英] What is the difference between CSS fit-content and max-content?

问题描述

我正在关注本文 https://css-tricks.com/almanac/properties/w/width/尝试了解此规则的工作原理.

I'm following this article https://css-tricks.com/almanac/properties/w/width/ to try to understand how this rules work.

我有这个例子:

*{margin:0; padding:0}
.box{
  background: lightgreen;
  margin: 0 auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

<div class="box">
  <img src="https://tyrannyoftradition.files.wordpress.com/2012/05/cutest-kitten-hat-ever-13727-1238540322-17.jpg" alt="" />
  <figure>Yes, put some text here that is wider than the image above to try some new rules</figure>
</div>

文章说，fit-content可用于通过 margin:x auto;

The article says that fit-content can be used to center a div of unknown width with margin: x auto;

但是，如果在此示例中将fit-content更改为max-content，则此方法无论如何都起作用，并且它们似乎总是以相同的方式运行.

But if you change fit-content for max-content in this example, this is working anyway and they seem to behave always in the same way.

有人知道这两个规则有什么区别吗?在哪种情况下应该使用其中一个?

Does anyone know what is the difference between this two rules and in which cases should I use one or the other?

推荐答案

fit-content使用max-content ，除非 可用<max-content ，然后使用 available .除非 可用<min-content ，然后使用 min-content .

fit-content uses max-content, unless available < max-content, then it uses available. Unless available < min-content, then it uses min-content.

这篇关于CSS fit-content和max-content有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！