拓展应用 · 布局
Flexbox：让活动按钮排列与换行
盒模型决定一个按钮占多大；Flexbox 决定同一容器中的多个按钮怎样排列。
给父容器设置布局
.activities {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 16px;
}<nav class="activities"> 中直接放入三个 <button>。
三个按钮的实际排列
display: flex：把父容器变成 Flex 容器，直接子元素成为 Flex 项目。
flex-direction: row：本例沿水平方向排列。
flex-wrap: wrap：一行放不下时允许换行；gap 设置项目与行之间的间距。
Flexbox 主要沿一个方向组织内容。即使换成多行，各行也分别安排空间，不保证不同的行形成对齐的列。
完整代码与运行演示
<style>
.activities {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 16px;
}
button {
font-size: 24px;
}
</style>
<nav class="activities">
<button>唱腔赏析</button>
<button>服饰观察</button>
<button>舞台交流</button>
</nav>