我有一个弹性框，其中有一堆项目设置为flex-grow: 1。这些项目将拉伸，直到一个新的列可以形成，然后所有移动需要。除了，当它达到5列目前只有3个剩余的项目为最后一行，他们拉伸到3个更大的项目比其余的，并填补了空间。我有justify-content设置为flex-start，但是我怎样才能使最后的那些项与它们上面的项的大小相匹配，并且恰好适合现有的列呢？我试过设置不同的对齐方式，但唯一能得到适当大小的项目是固定大小，这会遇到间距问题。
flex-grow: 1
justify-content
flex-start
k5ifujac1#
据我所知，您希望子节点填充父节点的列，并使其大小相等，最好使用grid属性，这将自动放置子节点并为您调整宽度。
grid
/* CSS */ .parent { display: grid; grid-template-columns: repeat(5, minmax(100px, 1fr)); gap: 10px; } /* unrelated */ .child { background-color: #AAA; text-align: center; }
<!-- --> <div class="parent"> <div class="child">content here</div> <div class="child">content here</div> <div class="child">content here</div> <div class="child">content here</div> <div class="child">content here</div> <div class="child">content here</div> <div class="child">content here</div> <div class="child">content here</div> </div>
因为在这个CSS规则repeat()有两个参数，第一个参数指定列数，最后一个参数指定列宽，您可以分别在minmax()中放置最小和最大宽度，就像flex-grow: 11fr会使其拉伸以填充剩余宽度一样，您还可以使用gap属性设置子对象之间差距
repeat()
minmax()
1fr
gap
1条答案
按热度按时间k5ifujac1#
据我所知，您希望子节点填充父节点的列，并使其大小相等，最好使用
grid属性，这将自动放置子节点并为您调整宽度。因为在这个CSS规则
repeat()有两个参数，第一个参数指定列数，最后一个参数指定列宽，您可以分别在minmax()中放置最小和最大宽度，就像flex-grow: 11fr会使其拉伸以填充剩余宽度一样，您还可以使用gap属性设置子对象之间差距