我会面临溢出吗？

时间：2018-11-23 07:14:40

标签： css flexbox

以下代码用于学习豚鼠：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.class1{
    border: 1px solid green;
    display: flex;
    justify-content: center;
    height: 100vh;
}

.class2{
    border: 3px solid black;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.class3{
    border: 1px solid red;
    height: 10vh;
    width: 10vw;
}
<div class='class1'>
            <div class='class2'>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
            </div>
        </div>

问题：

  1. 为什么 ？黑色矩形没有水平包含所有红色矩形？
  2. 为什么 ，黑色矩形的底部没有在该列的最后一个红色矩形中结束？ （我知道为什么没有空间可以容纳一个额外的红色矩形-这不是问题）。
  3. 如何 我可以在将flex-direction: column;保留在class2中的同时，使黑色矩形水平覆盖所有红色矩形吗？ （无需删除height: 100vh）

注意： 前两个问题具有更高的优先级，因此请不要仅使用代码发布答案。这没用。

谢谢！

1 个答案:

答案 0 :(得分：2)

  

为什么黑色矩形不包含所有红色矩形？

因为元素将flex-wrap: wrap;与flex-direction: column;一起使用。

来自the doc about using CSS flex-direction property with column option：

  

柔性项目垂直显示为一列

由于父div没有提供height值足够来包装所有项目，因此它将在此停止。

  

为什么黑色矩形的底部没有在该列的最后一个红色矩形中结束？

那是因为父div高度的原因。 不够。

  

如何使黑色矩形覆盖所有红色矩形？

从height: 100vh;移除class1属性

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.class1{
    border: 1px solid green;
    display: flex;
    justify-content: center;
    /*height: 100vh;*/
}

.class2{
    border: 3px solid black;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.class3{
    border: 1px solid red;
    height: 10vh;
    width: 10vw;
}
<div class='class1'>
            <div class='class2'>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
            </div>
        </div>

更新1： 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.class1{
    border: 1px solid green;
    display: flex;
    justify-content: center;
    height: 167px;
}

.class2{
    border: 3px solid black;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 201px;
    height: 166px;
}

.class3{
    border: 1px solid red;
    height: 10vh;
    width: 10vw;
}
<div class='class1'>
            <div class='class2'>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
            </div>
        </div>

更新2： 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.class1{
    border: 1px solid green;
    display: flex;
    justify-content: center;
    height: 87px;
}

.class2{
    border: 3px solid black;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 393px;
    height: 86px;
}

.class3{
    border: 1px solid red;
    height: 10vh;
    width: 10vw;
}
<div class='class1'>
            <div class='class2'>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
            </div>
        </div>

相关问题
最新问题