确保多个可变大小的 flexbox div 保持内联？答案

【问题标题】：Ensure multiple variable size flexbox divs stay inline?确保多个可变大小的 flexbox div 保持内联？
【发布时间】：2015-03-18 10:17:15
【问题描述】：

我有一些嵌套的弹性盒 可变大小 & 对于每个弹性盒我希望它们与前一个弹性盒保持内联直到最后一个可能的临界点（例如: 用 flexbox div 填充所有行空间，只要它们可以容纳，而不拉伸/调整内容大小！）

“年”和“月” 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;
}

【问题讨论】：

你的问题是什么？
"year" 和 "month" flex div 似乎只希望在它们的整个内容都适合的情况下保持内联。我更希望 flex div 内联流动，无论它们是否适合其全部内容。是不是更清楚了？
那么，你希望弹性盒子的一部分在同一行，而弹性盒子的其余部分在下一行？
宾果游戏，奥拉夫。我想不出任何办法来做到这一点！
与论坛网站不同，我们不使用“谢谢”、“感谢任何帮助”或Stack Overflow 上的签名。请参阅“Should 'Hi', 'thanks,' taglines, and salutations be removed from posts?。顺便说一句，这是“提前致谢”，而不是“在先致谢”。

标签： html css flexbox

【解决方案1】：

如果可能的话，flex 孩子 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 也有一个很好的总结

【讨论】：