Question

我尝试使用flexbox来实现下一步：

页脚和固定高度的标题。
编辑得到所有空间巫婆没有附件
附件高度从0到148px，具体取决于内容（附件编号）

这是真的吗？我只是通过flex-shrink / flex-grow实现了.attachments / .editor块的比例调整，没有内容依赖。

HTML

<section class="page">
    <header></header>
    <section class="editor"></section>
    <section class="attachments">
        <article></article>
        <article></article>
        <article></article>
    </section>
    <footer></footer>
</section>

CSS

.page{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    background-color: #f00;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
}
.page header{
    flex-grow: 0;
    flex-shrink: 0;

    background-color: #0f0;

    margin: 0 0 10px 20px;
    font-size: 0;
    line-height: 24px;
    height: 24px;
    padding: 15px 20px 15px 0;
    border-bottom:1px solid #ebeced;

}

.page footer{
    flex-grow: 0;
    flex-shrink: 0;

    background-color: #00f;

    height: 60px;
    line-height: 60px;
    text-align: right;
    font-size: 0;
    padding-right: 20px;
    border-top:1px solid #ebeced;   
}

.attachments{
    flex-grow: 1;
    flex-shrink: 1;

    background-color: #0ff;

    max-height: 148px;

    margin: 0 20px; 
    outline: none;
    color:#3c434a;
    font-size: 17px;
    line-height: 25px;
    overflow: auto;
}

.attachments article{
      float: left;
      border: 1px solid #e3e4e6;
      background-color: #fff;
      height: 57px;
      width: 303px;
      margin: 10px 10px 0 0; 
      position: relative;
      line-height: 57px;
}

.editor{
    flex-grow: 1;
    flex-shrink: 1;

    background-color: #ff0;

    margin: 0 20px;
    position: relative; 

    outline: none;
    color:#3c434a;
    font-size: 17px;
    line-height: 25px;
}

Господа，яхочучтобыуменяспомощьюфлекбоксовблоксредакторовзаполнялвсеместо，котороенезаполняетблоксаттачментами，ичтобыблоксаттачментамибылвысотойот0до148pxвзависимостиотналичиявнематтачментов。 Подскажите，этовообщереально？ Еслияпробуюприменитьflex-shrink / flex-growонопростопропорцианальнозаполняетпространствоблоками，безучетаконтентавнутри。

http://jsfiddle.net/7ADtq/

Answer 1

除flex-grow上的flex-shrink外，您不应该flex-grow和.editor。

这样，页脚和页眉的固定高度不会改变，.attachments的高度将等于其内容但不大于其max-height和.editor将填补所有其他空间。

以下是附件中没有内容的示例 - http://jsfiddle.net/kizu/r9b8E/ - 它具有所需的0高度。
这是一行文字：http://jsfiddle.net/kizu/z2Fj6/
这是10行 - http://jsfiddle.net/kizu/McZTV/

已更新：如果您需要在.editor处获得一些最小高度，您可以设置它，但如果您希望其他块不缩小身体变小，你应该给每个人flex-shrink: 0 - http://jsfiddle.net/kizu/X7L8S/（调整结果窗格的大小以查看其行为）

如何配置css flexbox，其中一个块的高度取决于它的内容？

1 个答案: