时间戳

首页 > 解决方案 > Flexbox：到达页面底部时如何将项目包装在 flexbox 内？

html - Flexbox：到达页面底部时如何将项目包装在 flexbox 内？

问题描述

我正在处理自定义起始页。我的目标是在一个弹性框中有几列彼此相邻。列本身也是 flexbox 并用圆圈填充，这些圆圈稍后将成为链接。

我想要实现的是将起始页的最大高度限制为可见屏幕区域，并在列到达页面底部时让列内的圆圈环绕到列的顶部。

这在我为列设置固定高度（例如 900 像素）时有效。但是，当我设置相对高度时，项目不会换行而是溢出页面底部并出现滚动条。

如何调整我的代码，使内容仅限于可见屏幕区域？

我对 html 很陌生，这是我的第一个真正的项目，所以我的代码在某些地方可能看起来有点奇怪。

这是我的 html 标记：

<body>
    <div class="wrapper">
        <div id="row1" class="fixedflex">This is the header</div>

        <div id="row2" class="flexflex">
            <div class="tilebox">
                <div class="tilecolumn">
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>                    

                </div>

                <div class="tilecolumn">
                    <div class="tile"></div>
                </div>

                <div class="tilecolumn">
                    <div class="tile"></div>
                </div>

            </div>
        </div>
            <footer id="row3" class="fixedflex">Footer</footer>
    </div>

</body>

这是css样式表的一部分

.wrapper {
/*
    border-style: solid;
    border-color: green;
    border-width: 1px;
*/
    height: 100%;
    width: 100%;

    display: flex;

    flex-direction: column;

}

.fixedflex {
    display: flex;
    flex-direction: column;

    flex-grow: 0;
    flex-shrink: 0;

    width: 100%;

    border-style: solid;
    border-color: white;
    border-width: 1px;
}

.flexflex {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;

    flex: 2;

    border-style: solid;
    border-color: yellow;
    border-width: 1px;
}

.tilebox {
    border-style: solid;
    border-color: red;
    border-width:5px;

    width: 80%;
    height: 100%;

    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;

    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;

    flex-grow: 0;
    flex-shrink: 0;
}

.tilecolumn {
    display: flex;
    flex-direction: column;

    max-height: 100%;

    justify-content: flex-start;
    align-items: center;
    align-content: center;

    flex-wrap: wrap;

    flex-basis: 20%;
    flex-grow: 2;
    flex-shrink: 2;

    margin: 20px;

}

.tile {
    display: flex;

    margin: 10px;

    width: 100px;
    height: 100px;

    color: var(--text_color);
    text-decoration: none;

    align-items: center;
    text-align: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--light_background);
}

我也在使用 normalize.css，但我认为那里没有任何东西会导致我的问题。

标签： htmlcssflexbox

解决方案

我首先将高度固定fixedflex为 20px，所以高度flexflex应该是 100vh - 两者的高度fixedflex和边框，所以它将是: height: calc(100vh - 72px);: stackblitz : https://stackblitz.com/edit/angular-tfpckr

HTML：

<body>
    <div class="wrapper">
        <div id="row1" class="fixedflex">This is the header</div>

        <div id="row2" class="flexflex">
            <div class="tilebox">
                <div class="tilecolumn">
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>
                    <div class="tile"></div>                    

                </div>

                <div class="tilecolumn">
                    <div class="tile"></div>
                </div>

                <div class="tilecolumn">
                    <div class="tile"></div>
                </div>

            </div>
        </div>
            <footer id="row3" class="fixedflex">Footer</footer>
    </div>

</body>

CSS：

.wrapper {
/*
    border-style: solid;
    border-color: green;
    border-width: 1px;
*/
    height: 100%;
    width: 100%;

    display: flex;

    flex-direction: column;

}

.fixedflex {
    display: flex;
    flex-direction: column;
    height: 20px;

    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;

    border-style: solid;
    border-color: white;
    border-width: 1px;
}

.flexflex {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    height: calc(100vh - 72px);
    flex: 1;

    border-style: solid;
    border-color: yellow;
    border-width: 1px;
}

.tilebox {
    border-style: solid;
    border-color: red;
    border-width:5px;

    width: 80%;
    height: 100%;

    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;

    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;

    flex-grow: 0;
    flex-shrink: 0;
}

.tilecolumn {
    display: flex;
    flex-direction: column;

    max-height: 100%;

    justify-content: flex-start;
    align-items: center;
    align-content: center;

    flex-wrap: wrap;

    flex-basis: 20%;
    flex-grow: 2;
    flex-shrink: 2;

    margin: 20px;

}

.tile {
    display: flex;

    margin: 10px;

    width: 100px;
    height: 100px;

    color: var(--text_color);
    text-decoration: none;

    align-items: center;
    text-align: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--light_background);
}

推荐阅读