CSS3-可伸缩框属性（Flexible Box）

可伸缩框属性（Flexible Box）

CSS3的属性，注意的是很多浏览器不支持直接的写法，需要加上前缀来书写，但功能确实很强大。
部分素材词解来自: w3school

属性	描述	CSS
box-align	规定如何对齐框的子元素。	3
box-direction	规定框的子元素的显示方向。	3
box-flex	规定框的子元素是否可伸缩。	3
box-flex-group	将可伸缩元素分配到柔性分组。	3
box-lines	规定当超出父元素框的空间时，是否换行显示。	3
box-ordinal-group	规定框的子元素的显示次序。	3
box-orient	规定框的子元素是否应水平或垂直排列。	3
box-pack	规定水平框中的水平位置或者垂直框中的垂直位置。	3

举例

box-align

通过使用 box-align and box-pack 属性，居中 div 框的子元素：

div
{
width:350px;
height:100px;
border:1px solid black;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari、Opera 以及 Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}

浏览器支持
目前没有浏览器支持 box-align 属性。
Firefox 支持替代的 -moz-box-align 属性。
Safari、Opera 以及 Chrome 支持替代的 -webkit-box-align 属性。

---

TODO:编辑中ing 2017年06月04日13:23:17

推荐阅读

---

• MAC资料大全大纲（软件、资料、限免）
• Sketch资料集合（请收藏，不断更新ing）
• MAC好软推荐-Eagle图片管理提升效率的神器
• MAC高级技巧-突破百度云会员高速下载
• [原创]Chrome浏览器常用插件列表

点赞、关注、加转发！

点赞的人发福利

未经许可禁止转载，分享到朋友圈才是义举。（转载联系作者）