gpt4 book ai didi

html - 确保多个可变大小的 flexbox div 保持内联?

转载 作者:行者123 更新时间:2023-11-28 08:14:42 25 4
gpt4 key购买 nike

我有一些可变大小的嵌套 flexboxes & 对于每个 flexbox,我希望它们与前一个 flexbox 保持内联,直到最后一个可能的 beaking 点(例如: 用 flexbox div 填充所有的行空间,只要它们可以容纳,而不拉伸(stretch)/调整内容的大小!)

“年”和“月”flex div 似乎只希望在它们的全部内容适合时保持内联。我更喜欢 flex div 在整个页面内联流动,无论它们是否适合其整个内容。我希望它们尽可能适合(即使只是一两个盒子)。

这是一张照片来说明我希望最终结果是什么样的:http://imgur.com/a/kN9w5

下面是一小段代码,您可以看到它的实际效果:http://jsfiddle.net/5q427Lgc/3/

<!DOCTYPE html>
<body>
<div id="shelf">
<div class="year"><span class="year-title">2015</span>
<div class="month"><span class="month-title">March</span>
<div class="album"></div>
</div>
<div class="month"><span class="month-title">February</span>
<div class="album"></div>
<div class="album"></div>
</div>
<div class="month"><span class="month-title">January</span>
<div class="album"></div>
<div class="album"></div>
<div class="album"></div>
</div>
<div class="year"><span class="year-title">2014</span>
<div class="month"><span class="month-title">December</span>
<div class="album"></div>
<div class="album"></div>
</div>
<div class="month"><span class="month-title">November</span>
<div class="album"></div>
</div>
</div>
</body>
<html>

还有 CSS:

#shelf, .year, .month {
display: flex;
flex-direction: row;
flex-flow: row wrap;
flex-wrap: wrap;
justify-content: flex-start;
}
.album {
height: 17px;
width: 17px;
margin: 2px;
background-color: red;
flex: auto;
}
.month-title, .year-title {
font-family: Helvetica;
font-size: 10px;
color: white;
height: 17px;
padding: 3px 2px 0 4px;
margin: 2px;
text-align: center;
width: 80px;
box-sizing: border-box;
border: 1px solid white;
}

最佳答案

如果可能的话,flex children do 保持在同一条线上。但它们作为一个整体这样做,它们不会包装子项以适应剩余空间。

如果你想实现这一点,你必须将子项作为父项的直接子项,例如不

<div>year <div>month album album</div> <div>month album album</div></div>

但是

<div>year month album album month album album</div>

您可以尝试结合使用 inline(年、月)和 inline-block(专辑)

.year, .month {
display: inline;
}
.album {
display: inline-block;
}

JSFiddle

如果您希望每年分开,请使用 inline 仅用于 .month

flexboxCSS-Tricks - A Complete Guide to Flexbox 也有很好的总结。

关于html - 确保多个可变大小的 flexbox div 保持内联?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29053053/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com