Question

body {
      background-color:olive;
      margin:0;
    }

    nav {
      background-color:aqua;
      position:sticky;
      top:0;
      border:1px solid red;

    }
    
    #container{
      max-height:1800px;
      display:flex;
      flex-direction:row;

      
    }

     a {
      
      background-color:chocolate;
      padding:7px;
      border-radius:10px; 
      text-decoration:none;
    }

    #container > a:hover{
      opacity:0.5;
    }

    #logout {
     margin-left:auto;
    }

    .bonus {
       margin-left:10px;
     }
    /* nav is finally done after 1.5 hours lol and another 30mins  */

   

   

    hr {
      border: 1px solid black;
    }

    #gallery {
      display:flex;
      justify-content:flex-start;
      flex-direction:row;
      width:60px;
      height:800px;

    }

    .class {
      flex:1;
      width:20%;
    }

    .image {
      align-self:center;
    }

`<body>

  <img src=https://images.unsplash.com/photo-1531870972494-627796a756dc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=72a43beae93d56392f98f6eda2cdd8cb&auto=format&fit=crop&w=500&q=60 width="100%" height="150" "border-radius:40px">
<nav>
  <div id="main-content">
  <div id="container" >
    <a id="main" href="index.html">Main</a>  
    <a id="information" class="bonus" href="information.html" >Statistics</a>
    <a id="contacts" class="bonus" href="contacts.html">Contacts</a>
    <a id="media" class="bonus" href="media.html" style="background-color:#bad455">Media</a>
    <a id="logout" href="logout.html">Log out</a>
    
</div>
  </div>

  
</nav>


<main>


  <div id="gallery">
    <div class="image"><img src="https://images.pexels.com/photos/128756/pexels-photo-128756.jpeg?auto=compress&cs=tinysrgb&h=350"></div>
    <div class="image"><img src="images/one.jpg"></div>
    <div class="image"><img src="images/one.jpg"></div>
    <div class="image"><img src="images/one.jpg"></div>
    <div class="image"><img src="images/one.jpg"></div>
    <div class="image"><img src="images/one.jpg"></div>
    <div class="image"><img src="images/one.jpg"></div>
    <div class="image"><img src="images/one.jpg"></div>
    <div class="image"><img src="images/one.jpg"></div>
    <div class="image"><img src="images/one.jpg"></div>
    <div class="image"><img src="images/one.jpg"></div>
    <div class="image"><img src="images/one.jpg"></div>
    <div class="image"><img src="images/one.jpg"></div>
    <div class="image"><img src="images/one.jpg"></div>
    <div class="image"><img src="images/one.jpg"></div>
    <div class="image"><img src="images/one.jpg"></div>
    <div class="image"><img src="images/one.jpg"></div>
    <div class="image"><img src="images/one.jpg"></div>
    <div class="image"><img src="images/one.jpg"></div>
    <div class="image"><img src="images/one.jpg"></div>
    <div class="image"><img src="images/one.jpg"></div>

  </div>


</main>
  

  
</body>

目前，我正在尝试使这张图片在Flexbox中占33％的比例，因此我可以在一排中容纳3张图片。但是由于某种原因，它不能那样工作。有人可以解释一下为什么吗？我正在尝试使用与本片段不同的图片。当我尝试应用代码段中的代码时，这是我的网站当前正在发生的事情：

http://prntscr.com/k9is4z

Answer 1

供您参考，我喜欢这个Flexbox概述：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

首先-不太清楚这应该做什么：

.class {
  flex:1;
  width:20%;
}

您在我没看见的地方有一个“ class”类名吗？

我的理解是，您希望有几行图像，每行包含3张图像，这些图像占视图宽度的1/3。

看起来需要做一些事情。

首先，将'flex-wrap'选项添加到您的Gallery元素。实际上，您可以将'flex-direction'和'flex-wrap'选项组合为简写方法'flex-flow'，并在这种情况下指定'row wrap'。

第二，我将从#gallery中删除宽度和高度。如果我错了，请纠正我，但是您的图库元素是否不应该扩展到视图的100％，以便您的图像都占据视图宽度的1/3？

此外，我倾向于避免指定固定的px宽度和高度，尤其是在使用flexbox时。 flexbox的巨大好处之一是它应该使响应式布局超级简单！因此最好考虑一下％。

根据这些第一步，#gallery看起来像这样：

#gallery {
  display:flex;
  justify-content:flex-start;
  flex-flow: row wrap;
}

第三，您的子div元素的宽度应设置为33％，这样它们的大小将自动设置为父元素（#gallery）宽度的1/3。

#gallery > div {
  width: 33%
}

第四，图像元素的宽度应为其容器（div元素）的100％。

img {
  width: 100%
}

这应该可以解决问题。图像大小调整/操作还有更多可用的选项，但我确实没有提及。让我知道您是否需要更多帮助！

为什么我的图片在flexbox中没有变小？

1 个答案: