一、弹性布局项目属性
1、order 属性值越大排列位置越靠后。
2、flex-grow 参与分配多余空间。默认0不参与,值越大分配的越多。
3、flex-shrink 空间不足时参与缩小空间。0不参与,默认1参与缩小,值越大缩越多。
4、flex-basis 在分配多余空间之前,项目占据的主轴空间,默认auto项目原本的大小。
5、flex flex-grow,flex-shrink,flex-basis的缩写,默认为0 1 auto;
flex:auto 为1 1 auto;
flex:none为0 0 auto。
6、align-item 使用align-content对一行项目进行单轴排列时,对单个项目位置进行设置
二、字符图形导入使用
用<link rel="stylesheet" href="./iconfont.css">引入字符图形样式表
使用<div class=“.iconfont .icon-kehuishou-buliaolei”></div>即可引用特定字符图形
三、菜单制作
使用无序列表和display:flex即可做出横向排列的菜单
当要添加一个二级菜单时,使用position对二级菜单进行定位,再使用display:none确保打开二级菜单前其处于消失状态。再用hover选择器使得虚指一级菜单项目时出现二级菜单。