面试：常用上下固定中间自适应——flexbox 解决以及相关问题

flexbox 解决方案

html 部分

         <article class="top-center-bottom">
             <div class="top"></div>
             <div class="center">
                <h2> felxbox 解决方案</h2>
                <p>中间拉伸，顶部和底部固定</p>
                <p>中间拉伸，顶部和底部固定</p>
             </div>
             <div class="bottom"></div>
         </article>

css

        html * {
            padding: 0;
            margin: 0;
        }
        html,
        body,
        .top-center-bottom {
            height: 100%;
        }
        .top-center-bottom {
            display: flex;
            flex-direction: column;
        }
        .top-center-bottom .top {
            height: 100px;
            background-color: red;
        }
        .top-center-bottom .center {
            flex: 1;
            background-color: yellow;
        }
        .top-center-bottom .bottom {
            height: 100px;
            background-color: olivedrab;
        }

常见错误解析

1.在整个外面包了一层 div，如：

<div>
         <article class="top-center-bottom">
             <div class="top"></div>
             <div class="center">
                <h2> felxbox 解决方案</h2>
                <p>中间拉伸，顶部和底部固定</p>
                <p>中间拉伸，顶部和底部固定</p>
             </div>
             <div class="bottom"></div>
         </article>
</div>

原因解析：

在外层的div 是没有宽度高度的，需要靠的是子元素撑开,里面的 <article> 是的高度是 css 中设置的top 和 bottom两个 100px 和 center 的高度。而center 的高度是根据内容撑开的。

这里延伸一个问题，在这里的的css 中的 flexbox 的设置到底有没有起作用呢？如果要修改的话该如何修改样式才能生效？欢迎评论处探讨。