CSS Flexbox与Grid：构建响应式布局的艺术

/* 使用Flexbox创建一个水平导航栏 */
.nav-horizontal {
  display: flex;
  justify-content: center;
}
 
.nav-horizontal li {
  list-style-type: none;
  padding: 0 10px;
}
 
.nav-horizontal a {
  text-decoration: none;
  color: #000;
}
 
/* 使用Grid创建一个三列的布局 */
.three-column {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 每列占用1/3的空间 */
  grid-gap: 10px; /* 设置网格间隙 */
  justify-items: center; /* 水平居中所有网格项 */
  align-items: center; /* 垂直居中所有网格项 */
}
 
/* 使用Flexbox创建一个登录表单，在小屏设备上垂直排列 */
.login-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
 
.login-form input {
  margin: 5px 0;
  padding: 5px;
}
 
.login-form button {
  padding: 10px 20px;
}
 
@media (min-width: 600px) {
  /* 在屏幕宽度大于或等于600px时，将登录表单的flex方向改为水平 */
  .login-form {
    flex-direction: row;
  }
}

这个例子展示了如何使用Flexbox和Grid布局技术来创建响应式的布局。.nav-horizontal 使用Flexbox创建一个水平居中的导航栏，.three-column 使用Grid布局创建一个三列的布局，而 .login-form 使用Flexbox创建一个登录表单，在屏幕宽度达到600px时，通过媒体查询改变Flex方向为水平排列。这样的代码示例有助于开发者理解如何利用这些布局技术创建灵活且响应迅速的用户界面。