Css box oritent 布局实例

下面是一个使用 CSS Box Orient 布局的示例：

HTML 代码：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

CSS 代码：

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
  height: 200px;
  background-color: #f1f1f1;
}

.item {
  width: 80px;
  height: 80px;
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}

解释：

- `display: flex;` 启用 Flexbox 布局。
- `flex-wrap: wrap;` 让子元素在一行放不下时换行。
- `gap: 10px;` 为子元素之间添加间距。
- `box-orient: horizontal;` 指定主轴方向为水平方向。
- `box-pack: center;` 指定在主轴方向上如何对齐子元素，这里是居中对齐。
- `box-align: center;` 指定在交叉轴方向上如何对齐子元素，这里是居中对齐。
- `height: 200px;` 指定容器的高度。
- `background-color: #f1f1f1;` 设置容器的背景色。
- `.item` 类是子元素的样式。
- `width: 80px;` 设置子元素的宽度。
- `height: 80px;` 设置子元素的高度。
- `background-color: #333;` 设置子元素的背景色。
- `color: #fff;` 设置子元素的文本颜色。
- `display: flex;` 让子元素也启用 Flexbox 布局。
- `justify-content: center;` 指定子元素在主轴方向上如何对齐，这里是居中对齐。
- `align-items: center;` 指定子元素在交叉轴方向上如何对齐，这里是居中对齐。
- `font-size: 24px;` 设置子元素的字体大小。