完成一個編輯文章的功能射众，頂部是標題蛮拔，底部是按鈕述暂，中間是正文。這種布局讓上下的元素各自對稱貼近頂?shù)捉牛虚g留白作為正文的編輯區(qū)最好看畦韭。
本來覺得這是個簡單功能，結(jié)果 google 發(fā)現(xiàn)很多方案都是簡單的將頂?shù)自厣舷露ㄎ桓氐雌饋盹@得占滿了屏幕艺配，而中間編輯區(qū)域的元素在文檔流中實際的占位大小并未改變。
因為編輯功能用了比較酷炫的 medium 控件衍慎，用戶焦點選中編輯區(qū)域控件才能激活转唉，所以需要讓編輯控件的高度也能隨瀏覽器高度自適應變化。
又一番調(diào)查后發(fā)現(xiàn)了 css3 新支持的 flex 屬性可以完美解決問題稳捆。用到的核心屬性如下：
父元素
flex-flow: column;
display:flex;編輯控件(子元素)
flex: 1;
這個 flex 屬性類似于 android 布局中 weight，指明當前元素在父元素內(nèi)分割的空間比例。這里只有一個元素擁有該屬性河狐，所以占據(jù)了所有剩余控件征椒。
父元素的屬性主要意思也是說自己支持縱向 flex 布局，這倒是沒什么復雜末荐，只是其他相關(guān)的屬性也要注意下才能完美侧纯。
min-height: 100%; /* 至少撐滿屏幕，萬一文章內(nèi)容比較長也可自動延伸 */
margin-top: 0;
margin-bottom: 0; /* 頁面開始已經(jīng)100%甲脏，margin 會導致初始狀態(tài)即超出屏幕 */
padding-top: 0;
padding-bottom: 0; /* 這兩條根據(jù)盒模型取舍眶熬，我司該處是 standard mode，同 margin 理由設(shè)為0 */
overflow-y: scroll; /* 一單文章超出初始區(qū)域剃幌，如果不能滾動就悲劇了 */
不過由于這幾個屬性比較新聋涨，舊的瀏覽器可能沒法支持。
