一文搞懂 CSS Flexbox 布局 - 2024年最新版

CSS Flexbox（弹性盒子布局）是一种现代CSS布局模型，主要用于在不同尺寸的屏幕上提供一致的用户体验。

以下是一个简单的Flexbox布局示例，它将创建一个水平排列的导航菜单：

.nav {
  display: flex; /* 指定为Flexbox布局 */
  list-style-type: none; /* 移除列表的标记 */
  padding: 0; /* 移除默认的内边距 */
  margin: 0; /* 移除默认的外边距 */
}
 
.nav li {
  margin-right: 10px; /* 给每个列表项加上一些外边距 */
}
 
.nav a {
  text-decoration: none; /* 移除下划线 */
  padding: 5px 10px; /* 添加一些内边距 */
  color: white; /* 文字颜色 */
  background-color: black; /* 背景颜色 */
}
 
.nav a:hover {
  background-color: #333; /* 鼠标悬停时的背景颜色 */
}

<ul class="nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">关于</a></li>
  <li><a href="#">联系</a></li>
</ul>

这段代码将创建一个水平导航栏，其中的列表项会使用Flexbox布局模型以水平方式排列。当鼠标悬停在某个链接上时，背景颜色会变深，提供了一定的视觉反馈。