css 如何设置Flex Box容器的特定大小？

ffscu2ro 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(133)

正如标题所述，我希望flexbox的容器具有特定的宽度和高度。然而，我不知道我可以使用什么方法。这是我的代码：

<div class="container-gallery">
  <img src="gallery/img.png" alt="">
  <img src="gallery/img1.jpg" alt="">
  <img src="gallery/img2.jpg" alt="">
  <img src="gallery/img3.jpg" alt="">
  <img src="gallery/img4.jpg" alt="">
  <img src="gallery/img5.jpg" alt="">
</div>

个字符
我尝试创建容器库的父div，以使子div居中，并在container-gallery中放置特定的宽度。它确实有效;但是，当您尝试重新设置它时，它不会将其内容居中，因为它设置了宽度。类似于以下内容：

<div class="container-gallery">
  <img src="gallery/img.png" alt="">
  <img src="gallery/img1.jpg" alt="">
  <img src="gallery/img2.jpg" alt="">
  <img src="gallery/img3.jpg" alt="">
  <img src="gallery/img4.jpg" alt="">
  <img src="gallery/img5.jpg" alt="">
</div>

.container-gallery {
  display: flex;
  flex-wrap: wrap;
  width: 67.5%;
}
.container-gallery img{
  width: 15%;
  height: 30vh;
  border-radius: 8%;
  margin: 1%;
}
.main-gallery {
  display: flex;
  justify-content: center;
}

的字符串
我该怎么办？
我对Flexbox很陌生，所以把这个当作新手问题。
它应该是这样的！宽度和高度. x1c 0d1x

css

来源：https://stackoverflow.com/questions/77733118/how-to-set-a-specific-size-of-a-flex-box-container

1条答案

按热度按时间

hmtdttj41#

下面的CSS解决了你的问题！
请在全屏查看正确的结果！
flex-grow: 0
flex-shrink: 0的
flex-wrap: 30.33%的
之所以不是33.33%或1/3，是因为要调整保证金！

html,
body {
  background-color: #191D2B;
  margin: 0px auto;
  padding: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.title {
  font-size: 50px;
  color: white;
}
.container-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.container-gallery img {
  flex: 0 0 30.33%;
  border-radius: 8%;
  margin: 5px;
}
.main-gallery {
  display: flex;
  justify-content: center;
}

个字符

展开查看全部

赞(0）回复(0）举报 2024-01-09

我来回答

css 如何设置Flex Box容器的特定大小？

1条答案

相关问题

热门标签

最新问答