display:box box-flex 和 display:flex flex 有什么区别？

Question

display:box box-flex 和 display:flex flex 有什么区别？

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

display:box和display:flex都是CSS中用于控制元素布局的方式。它们的主要区别在于如何处理嵌套的容器。

1. display:box：这种模式使用了盒模型来计算元素的位置和大小。当一个元素是块级元素（<div>）时，它会自动占据它的父元素的所有可用空间。这可能不会提供最佳的布局效果，因为它不考虑子元素的高度和宽度。因此，如果你想要实现完全基于内容高度或宽度的布局，那么可以尝试使用display:box。

示例代码：

<div style="width: 300px; height: 200px;"></div>

1. display:flex：这种模式使用Flexbox布局技术来创建响应式布局。它可以将任何类型的元素（包括块级、行内元素等）放入一个容器中，并且可以根据内容的尺寸自动调整其位置和大小。这意味着你可以轻松地在垂直方向上排列多个项目，而无需担心它们的高宽比例。这是现代浏览器标准的行为，但并不是所有旧版本的浏览器都支持。

示例代码：

<div class="flex-container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

<style>
.flex-container {
    display: flex;
}
</style>

总结：

• display:box适合于需要严格遵守特定高度/宽度限制的情况。
• display:flex更适合于需要根据内容自适应调整高度/宽度的布局需求。