在 CSS 中分布元素

Question

我正在尝试动态分布 CSS 中的元素，以将它们放入容器中，无论屏幕大小如何。

为了让您了解我想要实现的目标，这是我目前在一台设备上所拥有的，与另一台屏幕尺寸更大的设备相比

我对此的预期功能是，代码将查看整个空间可以容纳多少个项目，将它们均匀间隔并将它们集中在容器内，然后移动到下一行并重复操作，容纳尽可能多的项目，然后集中化。我相信这会有效地分配它们以适应空间，并且看起来相对简单，但我只是无法在网上找到我要找的东西。

目前我正在使用两个容器类，一个包含三个元素，一个包含两个元素，每个元素之间的宽度固定，但显然这不足以解决问题，因为有时元素挂在盒子外面，这CSS 是：

.container3 {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 5rem;
    align-self: center;
}

.container2 {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 5rem;
    align-self: center;
}

我认识到我是 CSS、HTML、JavaScript 和网站设计方面的新手，有 Python 背景，但我希望学习更多知识才能使其发挥作用，因此非常感谢 ELI5 :) 如果它对解决问题有任何帮助，该网站由 MediaWiki 提供支持，因为它是一个 wiki 网站，所以我不确定这是否会改变很多。

Answer 1

类似这样的东西吗？与

flex-wrap: wrap

和

justify-content:center

应该可以实现

.container {
  width: 800px;
  background: gray;
}

.year {
  color: purple;
  font-size: 72px;
  width: 250px
}

.years {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eros. Ut tempus consequat ex et pellentesque. Fusce nec metus eu turpis sodales volutpat sit amet sed justo. Suspendisse libero urna, tristique vel lacus sit amet, egestas consectetur dui. Sed lacinia a odio vitae tempus. Praesent lacus ipsum, ultrices vitae nunc eu, gravida finibus lacus. Aliquam erat volutpat. Praesent euismod maximus urna non pulvinar. Curabitur fringilla metus sed scelerisque lobortis. Nullam volutpat ultrices mi. Phasellus in tincidunt dui, at pretium arcu. Donec sapien ante, ultricies sit amet orci sit amet, consectetur vehicula sapien. Phasellus consectetur purus ac arcu cursus, et dictum enim semper.

Cras feugiat aliquet odio a pretium. Quisque hendrerit odio augue, at pharetra leo aliquet vel. Suspendisse id magna vitae ipsum condimentum scelerisque vestibulum vel augue. Fusce condimentum nec risus eu cursus. Nam faucibus eros dictum tristique vulputate. Nulla quis pellentesque quam. Phasellus ut accumsan odio. Phasellus vitae tincidunt metus. Sed et ex non metus sollicitudin dapibus vitae eget erat. Duis dignissim erat at ligula viverra tincidunt. Morbi eget mauris elit. Curabitur imperdiet erat sit amet aliquam dapibus. Curabitur quis placerat ante, quis ornare leo. Sed fringilla, metus ac fringilla faucibus, sem urna scelerisque tortor, eu gravida mauris sem a odio. Pellentesque ac sem a erat rutrum rhoncus eget ut est.

Nullam non nulla sit amet lectus scelerisque pharetra. Fusce sed mi tempor, ultricies nunc vel, molestie justo. Curabitur mauris ex, rutrum at laoreet in, suscipit quis ex. Aliquam suscipit finibus orci sit amet accumsan. In eget lorem viverra justo viverra egestas. Aliquam semper massa eget vulputate sodales. Maecenas ut leo orci. Vivamus sagittis, augue sit amet pellentesque venenatis, nulla ex porttitor lorem, eu interdum nisi lacus cursus mauris. Quisque eleifend risus a ante tincidunt aliquam. Pellentesque eget mi sed nibh molestie commodo non eget metus. Integer ut mi eu enim aliquet vulputate. Curabitur vulputate eu lorem sed sagittis. Nulla facilisi. Sed molestie vulputate auctor. Praesent semper venenatis rutrum.


  <div class="years">
    <div class="year">2020</div>
    <div class="year">2021</div>
    <div class="year">2022</div>
    <div class="year">2023</div>
    <div class="year">2024</div>

</div>

Answer 2

您应该考虑使用 % 值或

fr

单位而不是

rem

单位，这样网格间隙是相对于容器宽度的，而不是依赖于根元素的字体大小。您也可以类似地调整字体大小。