如何用Flexbox/Grid实现目标布局？导航栏列排布问题求助

一、先修正你的Flexbox代码（解决导航栏横向问题） #

你的导航栏纵向排列是因为没有给<ul>设置display: flex——flex-flow属性仅在flex容器上生效。同时你的HTML里class写法有误（class name="uList"需改为class="uList"），以下是修正后的完整代码：

CSS代码 #

body {
  background-color: white;
  font-family: 'Markazi Text', 'serif';
  text-align: center;
  display: flex;
  flex-flow: column nowrap; /* 避免页面宽度不足时元素换行 */
  min-height: 100vh; /* 让body占满视口高度，footer能固定到底部 */
  margin: 0; /* 清除默认边距 */
}

header>img {
  width: 25%;
  margin: 1rem auto; /* 让logo水平居中 */
}

nav>ul {
  list-style: none;
  background-color: grey;
  display: flex; /* 关键：将ul设为flex容器 */
  flex-flow: row wrap; /* 小屏幕自动换行 */
  justify-content: center; /* 导航项居中排列 */
  padding: 0;
  margin: 0;
}

nav>ul>li {
  padding: 1rem 2rem; /* 增大点击区域，提升体验 */
}

nav>ul>li>a {
  color: white;
  text-decoration: none;
}

main {
  flex: 1; /* 让main占满剩余空间，footer自动推到底部 */
  padding: 1rem;
}

main .article-container {
  display: flex;
  gap: 1rem; /* 三个section之间的间距 */
  margin-top: 1rem;
}

main .article {
  flex: 1; /* 每个section平分宽度 */
  background-color: #f0f0f0;
  padding: 2rem;
  border-radius: 8px;
}

footer {
  display: flex;
  justify-content: center;
  gap: 2rem;
  background-color: #eee;
  padding: 1rem;
}

.foot {
  margin: 0;
}

修正后的HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Little Lemon</title>
  <link href="styles.css" rel="stylesheet">
</head>

<body>
  <header>
    <img src="Images/Asset 14@4x.png" alt="Little Lemon Logo">
  </header>
  <nav>
    <ul class="uList">
      <li class="list"><a href="index.html">Home</a></li>
      <li class="list"><a href="menu.html">Menu</a></li>
      <li class="list"><a href="book.html">Book</a></li>
      <li class="list"><a href="about.html">About</a></li>
    </ul>
  </nav>
  <main>
    <h1>Main</h1>
    <div class="article-container">
      <section class="article">section1</section>
      <section class="article">section2</section>
      <section class="article">section3</section>
    </div>
  </main>
  <footer>
    <h1 class="foot">footer1</h1>
    <h1 class="foot">footer2</h1>
  </footer>
</body>

</html>

二、用Grid实现更简洁的布局 #

如果偏好Grid，整体页面可设为4行结构，main内部用Grid实现三个section的平分布局，代码更直观：

CSS代码 #

body {
  background-color: white;
  font-family: 'Markazi Text', 'serif';
  text-align: center;
  display: grid;
  grid-template-rows: auto auto 1fr auto; /* 行高：header/nav自适应，main占剩余空间，footer自适应 */
  min-height: 100vh;
  margin: 0;
}

header>img {
  width: 25%;
  margin: 1rem auto;
}

nav>ul {
  list-style: none;
  background-color: grey;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, auto)); /* 自适应列数，小屏幕自动换行 */
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
  margin: 0;
}

nav>ul>li>a {
  color: white;
  text-decoration: none;
}

main {
  padding: 1rem;
}

main .article-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三等分宽度 */
  gap: 1rem;
  margin-top: 1rem;
}

main .article {
  background-color: #f0f0f0;
  padding: 2rem;
  border-radius: 8px;
}

footer {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 2rem;
  background-color: #eee;
  padding: 1rem;
}

.foot {
  margin: 0;
}

三、关键问题说明 #

1. 导航栏横向核心：必须给<ul>设置display: flex或display: grid，否则flex-flow等flex属性无效。
2. 布局选择建议：
   • Flex更适合一维（单行/单列）布局，整体页面的上下结构用Flex实现很灵活。
   • Grid擅长二维布局，main内的三个section平分宽度用Grid代码更简洁。
3. 之前用inline-block的方式可行，但Flex/Grid的可维护性和响应式适配能力更强，是更高效的现代布局方案。

内容的提问来源于stack exchange，提问作者PotatoSucksAtCoding