分析
类型：CSS
分数：5分
难度：简单
考点：对 CSS Flex弹性布局的掌握，兄弟选择器的掌握
解题思路
熟练使用Flex弹性布局：
- 了解 Flex弹性布局 的应用场景、特点
- 掌握相关的属性，如：行间距、列间距、自动换行
技巧
- 由于要对第2列、第6列凳子设置右外边距，所以要使用 兄弟选择器，并且要搭配 表达式，对这两列进行设置
代码实现
在 style.css 文件，增加下面代码：
.seat-area{
/* 启用弹性布局 */
display: flex;
/* 自动换行 */
flex-wrap: wrap;
/* 行间距 */
/* row-gap:10px; */
/* 列间距 */
/* column-gap:10px; */
/* 一个值时，同时设置行间距、列间距 */
gap:10px;
margin-top: 50px;
}
/* 选中第2个子元素，并且类样式是 .seat */
/* 数字从1开始 */
/* .seat:nth-child(2){
margin-right: 20px;
}
.seat:nth-child(10){
margin-right: 20px;
} */
/*
可以是表达式：
8n+2, n从0开始
8*0+2=2
8*1+2=10
8*2+2=18
.....
*/
.seat:nth-child(8n+2) , .seat:nth-child(8n+6){
margin-right: 20px;
}