Home >Web Front-end >HTML Tutorial >CSS Flex-box示例代码_html/css_WEB-ITnose
CSS Flex-box示例代码_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:00:482461browse
.icons{
/*flex-box布局，子元素可以按需缩放*/
display: -webkit-box;
display: -moz-box;
display: -ms-box;
display: -o-box;
display: box;
/*flex-box布局，子元素可以按需缩放*/
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
/*row表示横向排列，wrap表示可以多行显示*/
-webkit-flex-flow:row wrap;
-moz-flex-flow:row wrap;
-ms-flex-flow:row wrap;
-o-flex-flow:row wrap;
flex-flow:row wrap;
}
.icons .ico{
/*flex:1;兼容旧版flex的形式*/
-webkit-box-flex:1;
-moz-box-flex:1;
-ms-box-flex:1;
-o-box-flex:1;
box-flex:1;
/*flex:auto;自适应*/
-webkit-flex:1 0 auto;
-moz-flex:1 0 auto;
-ms-flex:1 0 auto;
-o-flex:1 0 auto;
flex:1 0 auto;
}