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 中設(shè)置的top 和 bottom兩個 100px 和 center 的高度。而center 的高度是根據(jù)內(nèi)容撐開的。

這里延伸一個問題，在這里的的css 中的 flexbox 的設(shè)置到底有沒有起作用呢？如果要修改的話該如何修改樣式才能生效？歡迎評論處探討。