完成一个编辑文章的功能,顶部是标题,底部是按钮,中间是正文。这种布局让上下的元素各自对称贴近顶底,中间留白作为正文的编辑区最好看。
本来觉得这是个简单功能,结果 google 发现很多方案都是简单的将顶底元素上下定位,看起来显得占满了屏幕,而中间编辑区域的元素在文档流中实际的占位大小并未改变。
因为编辑功能用了比较酷炫的 medium 控件,用户焦点选中编辑区域控件才能激活,所以需要让编辑控件的高度也能随浏览器高度自适应变化。
又一番调查后发现了 css3 新支持的 flex 属性可以完美解决问题。用到的核心属性如下:
父元素
flex-flow: column;
display:flex;编辑控件(子元素)
flex: 1;
这个 flex 属性类似于 android 布局中 weight,指明当前元素在父元素内分割的空间比例。这里只有一个元素拥有该属性,所以占据了所有剩余控件。
父元素的属性主要意思也是说自己支持纵向 flex 布局,这倒是没什么复杂,只是其他相关的属性也要注意下才能完美。
min-height: 100%; /* 至少撑满屏幕,万一文章内容比较长也可自动延伸 */
margin-top: 0;
margin-bottom: 0; /* 页面开始已经100%,margin 会导致初始状态即超出屏幕 */
padding-top: 0;
padding-bottom: 0; /* 这两条根据盒模型取舍,我司该处是 standard mode,同 margin 理由设为0 */
overflow-y: scroll; /* 一单文章超出初始区域,如果不能滚动就悲剧了 */
不过由于这几个属性比较新,旧的浏览器可能没法支持。