flex九宫格抽奖布局

Flexbox九宫格抽奖布局是一种利用CSS Flexbox（弹性盒模型）来创建响应式、动态适应屏幕大小的网格布局的技术。它允许你在网页设计中轻松地组织元素，形成类似抽奖箱中九个格子的效果。以下是基本步骤：

1. **设置容器**: 首先，将包含抽奖格子的容器设置为flex布局，通常通过`display: flex;` 和 `flex-wrap: wrap;` 实现。

.container {
   display: flex;
   flex-wrap: wrap;
}

2. **定义单元格**: 使用`flex-basis`, `flex-grow`, 和 `flex-shrink` 属性控制每个格子的宽度。例如，可以给每个格子相同的初始宽度，并让它们按比例缩放。

.grid-item {
   flex: 1 0 calc(33.33% - 10px); /* 1/3 的总宽度减去边距 */
   margin: 5px; /* 可选，添加间距 */
}

3. **样式调整**: 根据需要调整网格布局的方向，如水平方向（row）或垂直方向（column），以及是否对齐（justify-content, align-items等）。

.row-direction {
   flex-direction: row;
}

.column-direction {
   flex-direction: column;
}

.justify-center {
   justify-content: center;
   align-items: center;
}