1.less
* {margin: 0;padding: 0;#banner-tag {.banner-tag-row {display: flex;&:nth-child(1) {.item {//每个item的弹性因子为1flex-grow: 1;//basis：可分配空间清零flex-basis: 0;//当item超过容器宽度时，减去多余的itemflex-shrink: 1;//语法糖写法=以上//flex: 1;//justify-content: space-around;text-align: center;a:before {//消除a标签样式text-decoration: none;color: gray;//将标签扩大为block元素display: block;content: "";width: 150px;height: 150px;border: 2px solid white;border-radius: 50%;//居中margin: 0 auto; }&:nth-child(1) {a {text-decoration: none;color: grey;font: 20px "微软雅黑";&:before {background: tomato;}}}&:nth-child(2) {a {text-decoration: none;color: grey;font: 20px "微软雅黑";&:before {background: deepskyblue;}}}&:nth-child(3) {a {text-decoration: none;color: grey;font: 20px "微软雅黑";&:before {background: url(../img/logo300-1.png);background-size: 150px;}}}&:nth-child(4) {a {text-decoration: none;color: grey;font: 20px "微软雅黑";&:before {background: seagreen;}}}&:nth-child(5) {a {text-decoration: none;color: grey;font: 20px "微软雅黑";&:before {background: steelblue;}}}}}&:nth-child(2) {.item {flex-grow: 1;flex-basis: 0;flex-shrink: 1;text-align: center;a:before {text-decoration: none;color: gray;display: block;content: "";width: 86px;height: 86px;border: 2px solid white;border-radius: 50%;margin: 0 auto;}&:nth-child(1) {a {text-decoration: none;color: grey;font: 20px "微软雅黑";&:before {background: steelblue;}}}&:nth-child(2) {a {text-decoration: none;color: grey;font: 20px "微软雅黑";&:before {background: seagreen;}}}&:nth-child(3) {a {text-decoration: none;color: grey;font: 20px "微软雅黑";&:before {background: url(../img/logo300-2.png);background-size: 86px;}}}&:nth-child(4) {a {text-decoration: none;color: grey;font: 20px "微软雅黑";&:before {background: deepskyblue;}}}&:nth-child(5) {a {text-decoration: none;color: grey;font: 20px "微软雅黑";&:before {background: tomato;}}}}}}}}
2.css
* {margin: 0;padding: 0;}* #banner-tag .banner-tag-row {display: flex;}* #banner-tag .banner-tag-row:nth-child(1) .item {flex-grow: 1;flex-basis: 0;flex-shrink: 1;text-align: center;}* #banner-tag .banner-tag-row:nth-child(1) .item a:before {text-decoration: none;color: gray;display: block;content: "";width: 150px;height: 150px;border: 2px solid white;border-radius: 50%;margin: 0 auto;}* #banner-tag .banner-tag-row:nth-child(1) .item:nth-child(1) a {text-decoration: none;color: grey;font: 20px "微软雅黑";}* #banner-tag .banner-tag-row:nth-child(1) .item:nth-child(1) a:before {background: tomato;}* #banner-tag .banner-tag-row:nth-child(1) .item:nth-child(2) a {text-decoration: none;color: grey;font: 20px "微软雅黑";}* #banner-tag .banner-tag-row:nth-child(1) .item:nth-child(2) a:before {background: deepskyblue;}* #banner-tag .banner-tag-row:nth-child(1) .item:nth-child(3) a {text-decoration: none;color: grey;font: 20px "微软雅黑";}* #banner-tag .banner-tag-row:nth-child(1) .item:nth-child(3) a:before {background: url(../img/logo300-1.png);background-size: 150px;}* #banner-tag .banner-tag-row:nth-child(1) .item:nth-child(4) a {text-decoration: none;color: grey;font: 20px "微软雅黑";}* #banner-tag .banner-tag-row:nth-child(1) .item:nth-child(4) a:before {background: seagreen;}* #banner-tag .banner-tag-row:nth-child(1) .item:nth-child(5) a {text-decoration: none;color: grey;font: 20px "微软雅黑";}* #banner-tag .banner-tag-row:nth-child(1) .item:nth-child(5) a:before {background: steelblue;}* #banner-tag .banner-tag-row:nth-child(2) .item {flex-grow: 1;flex-basis: 0;flex-shrink: 1;text-align: center;}* #banner-tag .banner-tag-row:nth-child(2) .item a:before {text-decoration: none;color: gray;display: block;content: "";width: 86px;height: 86px;border: 2px solid white;border-radius: 50%;margin: 0 auto;}* #banner-tag .banner-tag-row:nth-child(2) .item:nth-child(1) a {text-decoration: none;color: grey;font: 20px "微软雅黑";}* #banner-tag .banner-tag-row:nth-child(2) .item:nth-child(1) a:before {background: steelblue;}* #banner-tag .banner-tag-row:nth-child(2) .item:nth-child(2) a {text-decoration: none;color: grey;font: 20px "微软雅黑";}* #banner-tag .banner-tag-row:nth-child(2) .item:nth-child(2) a:before {background: seagreen;}* #banner-tag .banner-tag-row:nth-child(2) .item:nth-child(3) a {text-decoration: none;color: grey;font: 20px "微软雅黑";}* #banner-tag .banner-tag-row:nth-child(2) .item:nth-child(3) a:before {background: url(../img/logo300-2.png);background-size: 86px;}* #banner-tag .banner-tag-row:nth-child(2) .item:nth-child(4) a {text-decoration: none;color: grey;font: 20px "微软雅黑";}* #banner-tag .banner-tag-row:nth-child(2) .item:nth-child(4) a:before {background: deepskyblue;}* #banner-tag .banner-tag-row:nth-child(2) .item:nth-child(5) a {text-decoration: none;color: grey;font: 20px "微软雅黑";}* #banner-tag .banner-tag-row:nth-child(2) .item:nth-child(5) a:before {background: tomato;}
3.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>flex布局tag</title></head><body><div id="banner-tag"><div class="banner-tag-row"><div class="item"><a href="javascript:;">cevent</a></div><div class="item"><a href="javascript:;">echo</a></div><div class="item"><a href="javascript:;">移动端</a></div><div class="item"><a href="javascript:;">banner图标</a></div><div class="item"><a href="javascript:;">flex布局</a></div></div><div class="banner-tag-row"><div class="item"><a href="javascript:;">这是</a></div><div class="item"><a href="javascript:;">一个</a></div><div class="item"><a href="javascript:;">tag标签</a></div><div class="item"><a href="javascript:;">banner展示</a></div><div class="item"><a href="javascript:;">flex布局</a></div></div></div></body><link rel="stylesheet" href="css/flex-banner-tag-module.css" /></html>
