Question

我有一些可变大小＆amp;的嵌套式flexbox 对于每个flexbox我希望它们与前一个flexbox保持内联直到最后一个可能的喙点（例如：用flexbox div填充所有行空间，只要它们可以适合，不需要拉伸/调整内容大小！）

如果整个内容适合，“年”和“月”flex div似乎只想保持内联。我更喜欢flex divs在页面内部流动，无论它们是否适合整个内容。我希望他们尽可能多地适应（即使那只是一两盒）。

这是一张照片，用于说明我希望最终结果如何：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;
}

Answer 1

如果可能，flex儿童保持在同一行。但他们整体而言，他们不会包装子项目以适应剩余的空间。

如果您想实现这一点，您必须将子项目作为父项的直接子项，例如不是

<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。

在CSS-Tricks - A Complete Guide to Flexbox

，flexbox还有一个很好的摘要

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

1 个答案: