CSS3进阶技巧：Flexbox布局实战与高级应用

/* 设置一个容器使用Flexbox布局 */
.container {
  display: flex;
  flex-direction: row; /* 默认值，可以省略 */
  justify-content: space-around; /* 水平方向均匀分布子元素 */
  align-items: center; /* 垂直方向居中对齐子元素 */
  height: 100vh; /* 高度设置为视口高度 */
}
 
/* 子元素样式 */
.child {
  flex: 1; /* 子元素可伸缩，默认平分空间 */
  text-align: center; /* 文字居中对齐 */
  border: 1px solid #000; /* 边框，便于观察布局效果 */
  padding: 20px; /* 内边距 */
}
 
/* 特定子元素的样式 */
.child:nth-child(2) {
  order: 1; /* 调整子元素的排列顺序 */
  flex-grow: 2; /* 增长比例为其他子元素的两倍 */
}

这段代码展示了如何使用Flexbox布局来创建一个简单的布局，其中包含了Flexbox布局的基本和高级属性。通过.container类定义了一个Flexbox容器，并通过.child类定义了子元素的共有样式。通过:nth-child伪类选择器可以针对特定的子元素设置不同的样式，展示了如何调整元素的排列顺序和伸缩性。