[分享]css3宽高三等分

在 CSS 3 中，可以使用 flexbox 布局来实现宽高三等分的效果。

.container {
  display: flex;
}

.box {
  flex: 1;
} 

以上代码表示将容器设为 flex 布局，并且内部的盒子元素均分宽度。

另一种方法是使用网格布局来实现宽高三等分效果：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.box {
  background-color: #ccc;
  padding: 10px;
} 

以上代码表示将容器设为网格布局，每一行有三列，每一列的宽度平分剩余空间。

无论是 flexbox 还是网格布局，均能够实现宽高三等分的效果，可以根据实际需求选择合适的布局方式。