如何解决flexbox / grid CSS的最大行数
我的目标是在2-4行的网格中显示4-8个框。
.twit-container {
display: flex;
flex-wrap: wrap;
padding: 5%;
margin:-10px 0 0 -10px;
position: relative;
}
.twit {
max-width: 200px;
display: inline-block;
padding: 20px;
width: 150px;
min-height: 100px;
margin: 10px 0 0 1%;
background-color: #fff;
border: 1px solid #ccc;
flex-grow: 1;
outline: 2px solid blue;
}
这是网格中的同一件事：
这些框应展开以填充可用空间，而不必严格控制其大小。但是，每当我尝试使用屏幕空间不足以容纳偶数个项目时，最后一行的项目就会变形。
这个想法是要实现youtube的功能：
如果只有足够的空间来容纳3列，我希望最后一行完全不显示。在flexbox示例中，项目以丑陋的方式爆炸，在网格中它们只是悬挂在那里。
仅使用flexbox /或网格或其他方法而不使用媒体查询是否有可能？还是必须根据屏幕尺寸进行计算？
解决方法
您可以使用-{p>之类的flex属性在一行（简写形式）中简单地设置flex-shrink和flex-grow和flex-basis属性
flex: 1 1 200px; /* flex-grow:1; flex-shrink:1; flex-basis:200px;*/`
示例
.twit-container {
display: flex;
flex-wrap: wrap;
padding: 5%;
margin: -10px 0 0 -10px;
position: relative;
}
.twit {
flex: 1 1 240px;
padding: 15px;
width: 120px;
min-height: 100px;
margin: 10px 0 0 1%;
background-color: #fff;
border: 1px solid #ccc;
outline: 2px solid blue;
}<main class="twit-container">
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
Sitting in web dev... This class is so awesome!
</p>
<p class="twit-text">
Para 2!
</p>
<p class="twit-text">
Sitting in web dev... This class is so awesome!
</p>
<p class="twit-attribution">
<a href="#">CSMajor2017</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
text
</p>
<p class="twit-attribution">
<a href="#">BeaverBeliever</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
text
</p>
<p class="twit-attribution">
<a href="#">NewtonRulez</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
Huh?
</p>
<p class="twit-attribution">
<a href="#">ConfusedTweeterer</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
text
</p>
<p class="twit-attribution">
<a href="#">Setup</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
text
</p>
<p class="twit-attribution">
<a href="#">Punchline</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
text
</p>
<p class="twit-attribution">
<a href="#">Hess</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
text
</p>
<p class="twit-attribution">
<a href="#">TheIRS</a>
</p>
</div>
</article>
</main>
<button type="button" id="create-twit-button"><i class="fa fa-bullhorn"></i></button>,
如果结合使用grid-template-rows，grid-auto-rows和overflow-hidden，则可以隐藏隐式创建的行。
* {
box-sizing: border-box;
}
.twit-container {
background: teal;
padding: calc(5% - 10px);
}
.twit-container-inner {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
grid-template-rows: auto auto;
grid-auto-rows: 0px;
position: relative;
overflow: hidden;
}
.twit {
display: inline-block;
padding: 20px;
width: 150px;
min-height: 100px;
background-color: #fff;
border: 1px solid #ccc;
outline: 2px solid blue;
margin: 10px;
}<main class="twit-container">
<div class="twit-container-inner">
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
Sitting in web dev... This class is so awesome!
</p>
<p class="twit-text">
Para 2!
</p>
<p class="twit-text">
Sitting in web dev... This class is so awesome!
</p>
<p class="twit-attribution">
<a href="#">CSMajor2017</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
text
</p>
<p class="twit-attribution">
<a href="#">BeaverBeliever</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
text
</p>
<p class="twit-attribution">
<a href="#">NewtonRulez</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
Huh?
</p>
<p class="twit-attribution">
<a href="#">ConfusedTweeterer</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
text
</p>
<p class="twit-attribution">
<a href="#">Setup</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
text
</p>
<p class="twit-attribution">
<a href="#">Punchline</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
text
</p>
<p class="twit-attribution">
<a href="#">Hess</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
text
</p>
<p class="twit-attribution">
<a href="#">TheIRS</a>
</p>
</div>
</article>
</div>
</main>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。