css3属性fill-available，fit-content，min-content和max-content介绍

作者：Jasmine - 2020年07月09日

1.fill-available

/* 设置宽度为fill-available，可以使inline-block像block那样填充整个空间 */

.fill-available {
	padding: 20px;
	border: 1px solid #ccc;
	display: inline-block;
	/*width: 100%; */
	margin: 20px;
	/* box-sizing: border-box; */
	width: -webkit-fill-available;
}

2.fit-content

/* 设置宽度为fit-content，可以使block像inline-block那样实现收缩宽度包裹内容的效果 */

.fit-content {
	padding: 20px;
	border: 1px solid #ccc;
	/* display: inline-block; */
	width: fit-content;
	margin: auto;
}

3.min-content

/* 让内容尽可能地收缩 */

.min-content{
	border: 1px solid #333;
	width: min-content;
}

4.max-content

/* 让内容尽可能地展开 */

.max-content{
	border: 1px solid #333;
	width: max-content;
}

来源于： https://juejin.im/post/5d3eca78e51d4561cb5dde12#heading-32

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/666

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！