如何修复我的 flex box 图像的位置？

Question

我无法将我的 6 张图片对齐成 2 行，每行 3 张。- 1, 2, 3 4, 5, 6 目前他们排成三排。前 2 张图片位于页面中央，其他图片均位于第 3 行。不确定 div 标签或 css 是否有问题。我现在正在使用 flexbox，但我知道还有网格布局

请问有什么建议吗？非常感谢

* {
  margin: 0
}

a:link {
  text-decoration: none;
  color: black;
}

nav {
  background-color: pink;
  text-align: right;
  width: 100%;
  height: 160%;
  height: 300px;
}

li {
  list-style: none;
  display: inline-block;
  padding: 90px;
  font-family: cursive;
  text-decoration: none;
  position: relative;
  color: white;
}

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

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly
}

.rounded {
  border-radius: 20%;
}

button {
  border-radius: 20%;
  margin: 10px;
  width: 90px;
  height: 50px;
  border-style: none;
  background-color: white;
}

<!DOCTYPE html>
<html>

<body>

  <head>

  </head>
  <header>


    <nav>
      <button><a href="/Volumes/Untitled/coding/Cart.html" class="rounded">Go to 
    Cart</a></button>

      <button><a href="/Volumes/Untitled/codingShop.html" class="rounded">Shop</a></button>
      <ul>
        <img src="images/Logo2.jpeg" alt="my logo" class="rounded" width="160px" />

        <li><a href="index.html">HOME</a></li>
        <li><a href="shop.html">SHOP</a></li>
        <li><a href="blog.html">BLOG</a></li>
        <li><a href="about.html">ABOUT</a></li>
        <li><a href="contactus.html">CONTACT US</a></li>
      </ul>

    </nav>
  </header>
  <h3>
    Welcome to Luminous Butter. We dont sell Butter we do sell vintage, Customised and pre-loved Fashion Original Artwork Plus, we have a great blog which has original stories and writing to keep you entertained
  </h3>

  <div class="container">
    <div class="image">
      <img src="images/Fred.jpeg" alt="accessories" class="rounded" width="280px">
    </div>
    <div class="container">
      <div class="image">
        <img src="images/BlackonBlack.jpg" alt="photography" class="rounded" width="500px">
      </div>
      <div class="container">
        <div class="image">
          <img src="images/Boy.jpeg" alt="fashion" class="rounded" width="300px">
        </div>
        <div class="container">
          <div class="image">
            <img src="images/Campbell.jpeg" alt="footwear" class="rounded" width="400px">
          </div>

          <div class="container">
            <div class="image">
              <img src="images/Scandal.jpeg" alt="jewellery" class="rounded" width="300px">
            </div>
            <div class="container">
              <div class="image">
                <img src="images/bowie-big.jpeg" alt="art" class="rounded" width="300px">
              </div>


            </div>

Answer 1

您忘记关闭按钮内的 a。此外，如评论中所述，您不能将 img 作为未嵌套在 li 中的 ul 的直接子代。所以我将它嵌套在 li 中并删除了默认的 padding-inline-start 以保持相同的结构。然后我转到你的行并简化它，所以它是按要求的两行 3。请看我如何简化下面的行：

* {
  margin: 0
}

a:link {
  text-decoration: none;
  color: black;
}

nav {
  background-color: pink;
  text-align: right;
  width: 100%;
  height: 160%;
  height: 300px;
}

li {
  list-style: none;
  display: inline-block;
  padding: 90px;
  font-family: cursive;
  text-decoration: none;
  position: relative;
  color: white;
}

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

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly
}

.rounded {
  border-radius: 20%;
}

button {
  border-radius: 20%;
  margin: 10px;
  width: 90px;
  height: 50px;
  border-style: none;
  background-color: white;
}

<header>
  <nav>
    <button><a href="/Volumes/Untitled/coding/Cart.html" class="rounded">Go to Cart</a></button>
    <button><a href="/Volumes/Untitled/codingShop.html" class="rounded">Shop</a></button>
    <ul>
      <li style="padding: 0;">
        <a href="/"><img src="logo.png" alt="my logo" class="rounded" width="160px"></a>
      </li>
      <li><a href="index.html">HOME</a></li>
      <li><a href="shop.html">SHOP</a></li>
      <li><a href="blog.html">BLOG</a></li>
      <li><a href="about.html">ABOUT</a></li>
      <li><a href="contactus.html">CONTACT US</a></li>
    </ul>
  </nav>
</header>
<h3>
  Welcome to Luminous Butter. We dont sell Butter we do sell vintage, Customised and pre-loved Fashion Original Artwork Plus, we have a great blog which has original stories and writing to keep you entertained
</h3>

<div class="container">
  <img src="https://dummyimage.com/100/000/fff" alt="accessories" class="rounded" width="280px">
  <img src="https://dummyimage.com/100/000/fff" alt="photography" class="rounded" width="500px">
  <img src="https://dummyimage.com/100/000/fff" alt="fashion" class="rounded" width="300px">
</div>
<div class="container">
  <img src="https://dummyimage.com/100/000/fff" alt="footwear" class="rounded" width="300px">
  <img src="https://dummyimage.com/100/000/fff" alt="jewellery" class="rounded" width="300px">
  <img src="https://dummyimage.com/100/000/fff" alt="art" class="rounded" width="300px">
</div>

如何修复我的 flex box 图像的位置？

How do I fix the position of my flex box images?

html

css

flexbox