display: -webkit-box;的使用案例

一个使用案例是在CSS中创建一个自适应的三栏布局。以下是一个示例代码：

HTML代码：

<div class="container">
  <div class="sidebar">Sidebar</div>
  <div class="main">Main Content</div>
  <div class="sidebar">Sidebar</div>
</div>

CSS代码：

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.sidebar {
  background-color: #f1f1f1;
  padding: 10px;
  width: 25%;
}

.main {
  background-color: #fff;
  padding: 10px;
  width: 50%;
}

在这个布局中，`display: -webkit-box;`用于创建一个弹性布局容器，其中包含三个子元素。这三个子元素都设置了固定的宽度，但它们的高度是根据内容自适应的。这使得这个布局能够适应不同尺寸的屏幕和设备。