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 张图片。但由于某种原因，它不能那样工作。有人可以向我解释为什么吗？我正在尝试使用与此代码段不同的图片。以下是我尝试应用代码段中的代码时我的网站当前发生的情况:
最佳答案
供您引用，我喜欢这个 flexbox 概述:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
首先 - 不太确定这应该做什么:
.class {
flex:1;
width:20%;
}
你是否在某处有一个我没有看到的类名“类”？
我的理解是，您想要多行图片，每行包含 3 张占 View 宽度 1/3 的图片。
看起来需要一些东西。
首先，将“flex-wrap”选项添加到您的画廊元素。实际上，您可以将“flex-direction”和“flex-wrap”选项组合成一个速记方法“flex-flow”，并在这种情况下指定“row wrap”。
其次，我将从#gallery 中删除宽度和高度。如果我错了请纠正我，但您的画廊元素不应该扩展到 View 的 100%，以便您的图像每张占据 View 宽度的 1/3 吗？
此外，我倾向于避免指定固定的 px 宽度和高度，尤其是在使用 flexbox 时。 flexbox 的巨大好处之一是它应该使响应式布局变得 super 简单!所以最好用 % 来思考。
基于这些第一步，#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%
}
这应该可以解决问题。图像大小/操作还有一些可用的选项，但我真的没有看到任何提及。如果您需要更多帮助，请告诉我!
关于html - 为什么我的图片在 flexbox 中没有变小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51465636/