Question

我li's flexlayout。每列中有3 li's。（flex-basis设置为第三位。）在li我有一个div用于背景图片，另一个div用于显示文字。我希望文本在图像下方。图像占据了房间的大部分。

出于某种原因image不存在。我将image高度设置为80%，但是当我运行它并转到＆＃34;检查元素＆＃34; （在chrome中），div's高度为0.当我将其设置为具有像素的数量（不是百分比）时，它就会起作用。

我的问题是，如何将div设置为百分比并仍显示？

JSFiddle

＆＃13;

html, body {
    margin: 0;
    height: 100%;
}
div {
    align-items: center;
    justify-content: center;
    height: 100%;
    display: flex;
    overflow: auto;
    background-color:aqua;
}
ul {
    margin-top: auto;
    margin-bottom: auto;
    height: calc(70% + 0px);
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
    align-content: flex-start;
}
li {
    flex-basis: calc(100% / 3 - 2px);
    /* Subtract the border */
    color: firebrick;
    border: 1px solid firebrick;
    background-color: greenYellow;
    margin: 0px;
    list-style-type: none;
    box-sizing: border-box;
    background-size: contain;
    width: 200px;
}
.image {
    background-image: url("http://i.imgur.com/nswXRR4.jpg");
    background-size: contain;
    background-position: 50%, 50%;
    background-repeat: no-repeat;
    margin: 5px;
    height: 90%;
}

＆＃13;

<div>
    <ul>
        <li>
            <div class="image"></div>
            <div class="num">1</div>
        </li>
        <li>
            <div class="image"></div>
            <div class="num">2</div>
        </li>
        <li>
            <div class="image"></div>
            <div class="num">3</div>
        </li>
        <li>
            <div class="image"></div>
            <div class="num">4</div>
        </li>
    </ul>
</div>

＆＃13;

Answer 1

您的li没有定义height属性。然后，您的.image div尝试成为未定义的90%。你可以猜到它是什么：0。

根据您的需要，您可以将li设置为display:flex，然后允许.image div增长超过.num div，如下所示。< / p>

有多种方法可以修改flex: 10 1 0或flex: 1 0 0属性，以获得您正在寻找的内容，但下面的代码就是一个示例：

＆＃13;

html, body {
    margin: 0;
    height: 100%;
}
div {
    align-items: center;
    justify-content: center;
    height: 100%;
    display: flex;
    overflow: auto;
    background-color:aqua;
}
ul {
    margin-top: auto;
    margin-bottom: auto;
    height: calc(70% + 0px);
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
    align-content: flex-start;
}
li {
    flex-basis: calc(100% / 3 - 2px);
    /* Subtract the border */
    color: firebrick;
    border: 1px solid firebrick;
    background-color: greenYellow;
    margin: 0px;
    list-style-type: none;
    box-sizing: border-box;
    background-size: contain;
    width: 200px;
    display:flex;
  flex-direction:column;
}

.image {
     flex: 10 1 0; 
 }

.num {
  flex: 1 0 0;
}

.image {
    background-image: url("http://i.imgur.com/nswXRR4.jpg");
    background-size: contain;
    background-position: 50%, 50%;
    background-repeat: no-repeat;
    margin: 5px;
    height: 90%;
}

＆＃13;

<div>
    <ul>
        <li>
            <div class="image"></div>
            <div class="num">1</div>
        </li>
        <li>
            <div class="image"></div>
            <div class="num">2</div>
        </li>
        <li>
            <div class="image"></div>
            <div class="num">3</div>
        </li>
        <li>
            <div class="image"></div>
            <div class="num">4</div>
        </li>
    </ul>
</div>

＆＃13;

Answer 2

虽然li的高度由flex-basis: calc(100% / 3 - 2px);定义，但在处理百分比时，浏览器通常会将spec解释为height属性定义的高度。< / p>

根据我的经验，min-height，max-height和flex-basis在dealing with percentage heights时从未作为父元素的高度。只有height有效，即使它没有明确说明这必须是规范中的方式。（更新：Firefox may be broadening its interpretation.）

您可以进行此调整：

而不是：flex-basis: calc(100% / 3 - 2px);

使用：height: calc(100%/3 - 2px);

<强> 无论其...

根据你所写的内容：

在li我有一个div用于背景图片，另一个div用于显示文字。我希望文本在图像下方。图像应该占据了房间的大部分。

......这不一定是百分比高度的问题。您可以将flex-basis保留在li上，将li设置为Flex容器，然后将flex属性应用于图像和文本。

对li：

进行此调整

li {
    flex-basis: calc(100% / 3 - 2px);
    /* Subtract the border */
    color: firebrick;
    border: 1px solid firebrick;
    background-color: greenYellow;
    margin: 0px;
    list-style-type: none;
    box-sizing: border-box;
    background-size: contain;
    width: 200px;

    display: flex; /* new */
    flex-direction: column; /* new */
}

然后调整图像和文字：

.image {
    background-image: url("http://i.imgur.com/nswXRR4.jpg");
    background-size: contain;
    background-position: 50%, 50%;
    background-repeat: no-repeat;
    margin: 5px;
    /* height: 90%; remove */
    flex: 10 1 auto; /* new */
}

.num {
    flex: 1 1 auto;
}

DEMO

注意：flex: 10 1 auto;表示flex-grow: 10，flex-shrink: 1，flex-basis: auto。换句话说，与flex-grow: 1的兄弟姐妹相比，弹性项目可以消耗多达10倍的可用空间，与具有flex-shrink: 1的兄弟姐妹成比例地缩小，并且其初始主要大小基于内容大小。

设置百分比时，Div的高度变为0

JSFiddle

2 个答案: