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

flexbox 解决方案

html 部分

         

             

             

                
 felxbox 解决方案
                
中间拉伸，顶部和底部固定
                
中间拉伸，顶部和底部固定
             
             

         

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，如：

         

             

             

                
 felxbox 解决方案
                
中间拉伸，顶部和底部固定
                
中间拉伸，顶部和底部固定
             
             

         

原因解析：

在外层的div 是没有宽度高度的，需要靠的是子元素撑开,里面的

是的高度是 css 中设置的top 和 bottom两个 100px 和 center 的高度。而center 的高度是根据内容撑开的。

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