Flex布局 实现响应式导航模块
作者：互联网
效果：
下面是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* do some initialize start */
* {
box-sizing: border-box;
}
html {
font-size: 12px;
}
body {
margin: 0;
}
/* do some initialize end*/
.main-nav {
background: #eee;
}
.main-nav-list {
/* do some initialize start */
margin: 0;
padding: 0;
/* do some initialize end */
/* change to flex model */
display: flex;
/* wrap elements */
flex-wrap: wrap;
/* define elements aligent the center of main axis */
justify-content: center;
/* clear default style */
list-style: none;
}
.main-nav-list a {
/* recommend rem unit because it flexible */
padding: 1.25rem 0.5rem;
font-size: 1.6rem;
max-width: 327px;
font-weight: bold;
text-decoration: none;
display: flex;
/* define items align on croos axis */
align-items: flex-start;
color: #333;
}
.main-nav-list a:hover,
.main-nav-list a:focus {
background: #ccc;
color: black;
}
.main-nav-list a:hover svg,
.main-nav-list a:focus svg {
fill: green;
}
.main-nav-list a:hover span,
.main-nav-list a:focus span {
color: black;
}
.main-nav-list span {
display: block;
font-size: 1rem;
font-weight: normal;
color: #888;
margin: 0.25rem 0 0 0;
}
.main-nav-list .icon {
width: 40px;
height: 40px;
float: left;
margin-right: 1rem;
}
@media (min-width: 1000px) {
/* 当页面大于1000px时，不换行 */
.main-nav-list {
flex-wrap: nowrap;
}
/* 使用媒体查询,当页面大于1000px时，就将每项宽度调大，但只能最大400px; */
.main-nav a {
max-width: 400px;
font-size: 2rem;
}
.icon {
width: 25px;
height: 25px;
}
}
/*
max-width 和 min-width ，可以这么来读。
max-width 最大宽度只有这么大就。。。样，
min-width 超过最小宽度时就。。。样
*/
</style>
</head>
<body>
<nav class="main-nav">
<ul class="main-nav-list">
<li>
<a href="#">
<svg t="1586171838612" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1009" width="32" height="32">
<path
d="M133 909.5c0-24.6 169.7-44.5 379-44.5s379 19.9 379 44.5S721.3 954 512 954s-379-19.9-379-44.5z"
fill="#EDEDEE" p-id="1010"></path>
<path
d="M443.9 258c-1.3-12.2-12.2-45-3.6-70.8s39.5-73.3 54.9-83.8c15.4-10.5 40.9 5.7 37.6 21s-46.3 48.5-57.8 70.8-6.4 52-10.8 62.9c-4.5 10.8-12.4 2.2-15.9 2.2s-3.1 9.8-4.4-2.3z"
fill="#976C4F" p-id="1011"></path>
<path
d="M152 518c0-151.3 135.4-274 302.5-274S757 366.7 757 518 621.6 792 454.5 792 152 669.3 152 518z"
fill="#FB6568" p-id="1012"></path>
<path d="M287 567h606l-1.4 25.3C876.1 730.3 747 838 590 838S303.9 730.3 288.4 592.3L287 567z"
fill="#F9272C" p-id="1013"></path>
<path
d="M451.2 246l29.8 1.4-10 0.5c-152.9 14-272.2 130.5-272.2 272.1 0 141.5 119.3 258 272.2 272l1.2 0.1-21 1C283.7 793 148 670.5 148 519.5S283.7 246 451.2 246z"
fill="#F9272C" p-id="1014"></path>
<path d="M348 567h484l-1.1 20.3C818.5 697.8 715.4 784 590 784s-228.5-86.2-240.9-196.7L348 567z"
fill="#FB6568" p-id="1015"></path>
<path
d="M504.7 618.8l-1-48 170.3-3.4 1 48c0.9 47-36.4 85.9-83.5 86.9-47 0.9-85.9-36.5-86.8-83.5z"
fill="#FC9A9C" p-id="1016"></path>
<path
d="M791.9 618.4c-2 5.6-8.2 8.5-13.9 6.5l-15.2-5.5c-5.6-2-8.5-8.2-6.5-13.8 2-5.6 8.2-8.5 13.8-6.5l15.2 5.5c5.8 2 8.7 8.2 6.6 13.8zM754.6 683c-3.8 4.6-10.7 5.2-15.2 1.3L727 673.9c-4.6-3.8-5.2-10.7-1.3-15.2 3.8-4.6 10.7-5.2 15.2-1.3l12.4 10.4c4.6 3.8 5.2 10.6 1.3 15.2zM697.5 730.9c-5.2 3-11.8 1.2-14.8-4l-8.1-14c-3-5.2-1.2-11.8 4-14.8s11.8-1.2 14.8 4l8.1 14c2.9 5.2 1.2 11.8-4 14.8zM627.4 756.4c-5.9 1-11.5-2.9-12.5-8.8l-2.8-16c-1-5.9 2.9-11.5 8.8-12.5s11.5 2.9 12.5 8.8l2.8 16c1 5.9-2.9 11.5-8.8 12.5zM552.8 756.4c-5.9-1-9.8-6.6-8.8-12.5l2.8-16c1-5.9 6.6-9.8 12.5-8.8s9.8 6.6 8.8 12.5l-2.8 16c-1 6-6.6 9.9-12.5 8.8zM482.7 730.9c-5.2-3-6.9-9.6-4-14.8l8.1-14c3-5.2 9.6-6.9 14.8-4s6.9 9.6 4 14.8l-8.1 14c-3 5.2-9.6 7-14.8 4zM425.6 683c-3.8-4.6-3.2-11.4 1.3-15.2l12.4-10.4c4.6-3.8 11.4-3.2 15.2 1.3 3.8 4.6 3.2 11.4-1.3 15.2l-12.4 10.4c-4.6 3.8-11.4 3.3-15.2-1.3zM388.3 618.4c-2-5.6 0.9-11.8 6.5-13.8l15.2-5.5c5.6-2 11.8 0.8 13.8 6.5 2 5.6-0.9 11.8-6.5 13.8l-15.2 5.5c-5.6 2-11.8-0.9-13.8-6.5z"
fill="#FED572" p-id="1017"></path>
<path
d="M452.2 237l2.3 0.1 2.3-0.1v0.3l23.9 1.4c28.7 2.2 58.1 6.4 90.4 18.7 43.1 16.4 128.8 63.4 139.4 78 10.6 14.6-42.9 8.2-75.7 9.6-20.5 0.9-50.5 3.2-77.7 3l-13.1-0.4-75.5-87.3-71.9 83.2-1.1 0.4c-31.7 7.8-88.5 2.6-121.4 1.2s-86.3 5-75.7-9.6c10.6-14.6 96.4-61.6 139.4-78 32.3-12.3 61.7-16.5 90.4-18.7l23.9-1.4 0.1-0.4z"
fill="#7CD0A4" p-id="1018"></path>
<path
d="M453.6 238c-45.2 23.4-66.5 29-109.5 59.6s-55.6 68.1-55.1 81.1 33.2 6.8 58.2-3.1 67.3-27.3 91.8-56.2c24.5-28.9 14.6-54.5 19-81.4"
fill="#4DBF83" p-id="1019"></path>
<path
d="M458.4 238c45.2 23.4 66.5 28.9 109.5 59.6 43 30.6 55.6 68.1 55.1 81.1s-33.2 6.8-58.2-3.1-67.3-27.3-91.8-56.2c-24.5-28.9-14.6-54.5-19-81.4"
fill="#4DBF83" p-id="1020"></path>
</svg>
<div>
首页
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quisquam quis nihil
quia. Aliquam nesciunt iure pariatur sed amet adipisci?</span>
</div>
</a>
</li>
<li>
<a href="#">
<svg t="1586171870570" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1218" width="32" height="32">
<path
d="M133 909.5c0-24.6 169.7-44.5 379-44.5s379 19.9 379 44.5S721.3 954 512 954s-379-19.9-379-44.5z"
fill="#EDEDEE" p-id="1219"></path>
<path
d="M405 466c-62 32.3-91.2 39.9-150.3 82.1-59.1 42.2-76.3 93.8-75.6 111.8 0.7 17.9 45.5 9.3 79.8-4.3 34.3-13.6 92.4-37.6 126-77.4S404.8 503 411 466"
fill="#4DBF83" p-id="1220"></path>
<path
d="M412 466c61.7 32.3 90.8 39.9 149.7 82.1 58.8 42.2 76 93.8 75.3 111.8-0.7 17.9-45.3 9.3-79.5-4.3-34.2-13.6-92-37.6-125.5-77.4-33.4-39.8-19.9-75.2-26-112.1"
fill="#4DBF83" p-id="1221"></path>
<path
d="M236 454.5c0-66 75.9-119.5 169.5-119.5S575 388.5 575 454.5 499.1 574 405.5 574 236 520.5 236 454.5z"
fill="#FDCBCC" p-id="1222"></path>
<path
d="M132.7 546.9c-27-42.9-5.1-105.2 48.8-139 53.9-33.9 119.4-26.5 146.4 16.4s5.1 105.2-48.8 139-119.5 26.5-146.4-16.4z"
fill="#FCB2B4" p-id="1223"></path>
<path
d="M233.6 231.1c42.4-27.8 105-7.2 139.9 46S402.4 396 360 423.8c-42.4 27.8-105 7.2-139.9-46-35-53.2-28.9-118.9 13.5-146.7z"
fill="#FCB2B4" p-id="1224"></path>
<path
d="M140.5 245.5c49.4 0 91.9 28.5 110 69.1l0.8 2.1 8 2.8c32.1 12.9 57.1 38.7 67.5 70.6l1.1 4.7v0.1c-3.6 8.6-8.7 16.5-15.4 23.2-35.9 35.7-104.1 25.4-152.3-23-45.2-45.4-56.7-108.3-28.4-145.4l3.5-4 5.2-0.2z"
fill="#FC888B" p-id="1225"></path>
<path
d="M665.5 539.5c27-42.9 5.1-105.2-48.8-139-53.9-33.9-119.4-26.5-146.4 16.4s-5.1 105.2 48.8 139c53.9 33.9 119.5 26.6 146.4-16.4z"
fill="#FCB2B4" p-id="1226"></path>
<path
d="M564.6 223.8c-42.4-27.8-105-7.2-139.9 46-34.9 53.2-28.8 118.9 13.6 146.7 42.4 27.8 105 7.2 139.9-46 34.8-53.3 28.8-119-13.6-146.7z"
fill="#FCB2B4" p-id="1227"></path>
<path
d="M657.7 238.2c-49.4 0-91.9 28.5-110 69.1l-0.8 2.1-8 2.8c-32.1 12.9-57.1 38.7-67.5 70.6l-1.1 4.7v0.1c3.6 8.6 8.7 16.5 15.4 23.2 35.9 35.7 104.1 25.4 152.3-23 45.2-45.4 56.7-108.3 28.4-145.4l-3.5-4-5.2-0.2z"
fill="#FC888B" p-id="1228"></path>
<path
d="M403.3 196.1c10.4 0 19.6 17.1 25.1 43.1l0.2 1.5 3.1-3.6c12.2-12.7 24.4-18.7 33.5-15 18.3 7.5 17.8 51.1-1.2 97.5-14.2 34.7-34.8 61.1-51.9 69l-2.3 0.7-0.4 0.4c-2 1.3-4 2-6.1 2l-4.3-1.4-2.5-0.4c-2.3-0.9-4.3-2.4-6-4.4l-0.2-0.3-5-3.1c-15-11.5-31.3-34.8-43.3-63.9-19.1-46.6-19.7-90.4-1.4-97.9 9.2-3.8 21.3 2.3 33.6 15.1l3.8 4.5 0.1-0.6c5.5-26.1 14.7-43.2 25.2-43.2z"
fill="#FDCBCC" p-id="1229"></path>
<path
d="M404.5 375c15.6 0 29.4 11.8 37.5 29.8l0.4 1 4.6-2.5c18.3-8.8 36.4-12.9 50.1-10.3 27.4 5.2 26.6 35.3-1.8 67.3-21.3 24-52 42.2-77.6 47.6l-3.5 0.5-0.6 0.3c-2.9 0.9-6 1.4-9.1 1.4l-6.4-1-3.8-0.2c-3.4-0.6-6.4-1.7-8.9-3.1l-0.2-0.2-7.5-2.2c-22.5-8-46.8-24-64.6-44.1-28.5-32.2-29.4-62.4-2-67.6 13.7-2.6 31.9 1.6 50.2 10.4l5.7 3.1 0.1-0.4c8-18 21.8-29.8 37.4-29.8z"
fill="#FB6568" p-id="1230"></path>
<path
d="M893.8 763c11.6-22.6 4.3-88.2-40.9-116.5-45.2-28.4-62.9-9.8-122.7 13.8 6.4 62.2 8.1 93.7 53.3 122.1 45.1 28.3 98.7 3.2 110.3-19.4z"
fill="#FCB2B4" p-id="1231"></path>
</svg>
<div>
文章
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quisquam quis nihil
quia. Aliquam nesciunt iure pariatur sed amet adipisci?</span>
</div>
</a>
</li>
<li>
<a href="#">
<svg t="1586171878746" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1435" width="32" height="32">
<path
d="M475.2 389.8l82.2 297.6c7.4 26.8-6.2 55.2-31.8 66.2l-11.7 5c-25.6 11-55.4 1.4-69.5-22.6L287.8 470.4c-21.4-45.6-10.9-133.8 20-147 39.3-20.6 12.8-7.1 45.7-21.7 32.4-12.2 108.5 49.3 121.7 88.1"
fill="#FC7968" p-id="1436"></path>
<path
d="M510.3 682.8c0.8-0.7 1.7-1.3 2.8-1.7l32-11.6c4.3-1.5 9.1 0.7 10.8 4.9 1.7 4.3-0.4 9-4.7 10.5l-32 11.6c-4.3 1.5-9.1-0.7-10.8-4.9-1.3-3.2-0.4-6.6 1.9-8.8z m-82.1 17.8l14.1-5.1c4.3-1.5 9.1 0.7 10.8 4.9s-0.4 9-4.7 10.5L437 715l-8.8-14.4z m-11.5-75.7c0.8-0.7 1.7-1.3 2.8-1.7l32-11.6c4.3-1.5 9.1 0.7 10.8 4.9s-0.4 9-4.7 10.5l-32 11.6c-4.3 1.5-9.1-0.7-10.8-4.9-1.3-3.2-0.5-6.7 1.9-8.8z m56.7-89.8c0.4-0.7 0.9-1.3 1.4-1.8 0.8-0.7 1.7-1.3 2.8-1.7l32-11.6 1.6-0.2 4.6 15.6-0.1 0.1-32 11.6c-4.3 1.5-9.1-0.7-10.8-4.9-0.9-2.6-0.6-5.1 0.5-7.1z m-86.9 14.5c0.4-0.7 0.9-1.3 1.4-1.8 0.8-0.7 1.7-1.3 2.8-1.7l32-11.6c4.3-1.5 9.1 0.7 10.8 4.9 1.7 4.3-0.4 9-4.7 10.5l-32 11.6c-4.3 1.5-9.1-0.7-10.8-4.9-0.9-2.4-0.6-4.9 0.5-7z m12.6-78.6c0.4-0.7 0.9-1.3 1.4-1.8 0.8-0.7 1.7-1.3 2.8-1.7l32-11.6c4.3-1.5 9.1 0.7 10.8 4.9 1.7 4.3-0.4 9-4.7 10.5l-32 11.6c-4.3 1.5-9.1-0.7-10.8-4.9-0.9-2.4-0.6-4.9 0.5-7z m-84 43l14.8-5.4c4.3-1.5 9.1 0.7 10.8 4.9s-0.4 9-4.7 10.5l-12.1 4.4-8.8-14.4z m-13-76.1c0.4-0.7 0.9-1.3 1.4-1.8 0.8-0.7 1.7-1.3 2.8-1.7l32-11.6c4.3-1.5 9.1 0.7 10.8 4.9 1.7 4.3-0.4 9-4.7 10.5l-32 11.6c-4.3 1.5-9.1-0.7-10.8-4.9-0.9-2.4-0.7-5 0.5-7z"
fill="#A11603" p-id="1437"></path>
<path
d="M177.8 156.8l0.3-0.3 0.1 0.1 3.1-2.6c7.6-5.8 16.1-8.8 23.2-8.6l1 0.1 0.7-1c1.1-1.2 2.3-2.3 3.6-3.3 5.2-4 11.8-6 18.8-5.1 12.2 1.6 21.3 11.5 22.2 23.3v0.5l3.8 24.6c0.9 5.7 6.2 8.9 11.3 7.9l1.5-0.5 2.7-2.5c5.7-5.2 14.8-1.9 15.9 5.6l4.5 29.1c1.2 7.6 10.3 10.8 16.2 5.4 5.7-5.2 14.8-1.9 15.9 5.6l8 52.2 0.2 0.6c1.8 7.5-0.8 16.5-7.1 23.8l-2.5 2.6-0.2-0.2-2.4 1.9c-7.9 5.6-17.1 7.3-24.4 4.8l-0.5-0.2-51.2-12.9c-7.4-1.9-9.8-11.3-4.1-16.4 5.9-5.4 3.5-14.7-3.9-16.6L206 268c-7.4-1.9-9.8-11.3-4.1-16.4l2.7-2.5 0.6-1.4c1.5-5-1.2-10.6-6.8-12l-24.2-6.1-0.5-0.1c-11.7-2-20.7-12-21.2-24.3-0.2-7 2.4-13.5 6.8-18.3 1.1-1.2 2.3-2.3 3.7-3.2l1-0.6V182c0.6-8.1 5.5-17.6 13.8-25.2z"
fill="#7CD0A4" p-id="1438"></path>
<path
d="M286 103.7l-0.4 0.1v0.2l-3.9 1c-9.2 2.8-16.5 8-20.4 14l-0.5 0.9h-1.2c-1.6 0.2-3.2 0.5-4.8 1-6.2 1.9-11.7 6.2-15 12.4-5.8 10.9-2.9 24.1 6.3 31.6l0.4 0.3 17.9 17.3c4.1 4 3.7 10.2-0.1 13.8l-1.3 0.9-3.6 0.8c-7.5 1.7-10.1 11-4.6 16.3l21.2 20.5c5.5 5.3 2.9 14.6-4.9 16.3-7.5 1.7-10.1 11-4.6 16.3l38 36.7 0.4 0.5c5 5.8 13.9 8.9 23.6 7.9l3.6-0.6-0.1-0.2 2.9-0.8c9.2-3.2 15.9-9.8 18-17.1l0.1-0.6 19-49.3c2.8-7.1-3.5-14.5-11-12.8-7.8 1.7-14.1-5.6-11.3-12.8l10.6-27.5c2.8-7.1-3.5-14.5-11-12.8l-3.6 0.8-1.5-0.3c-4.9-1.7-7.9-7.1-5.9-12.5l9-23.3 0.3-0.5c5.1-10.7 2.2-23.8-7.6-31.3-5.6-4.3-12.4-5.8-18.9-5-1.6 0.2-3.2 0.6-4.8 1.1l-1.1 0.5-0.9-0.6c-6.7-4.1-17.2-5.6-28.3-3.2z"
fill="#7CD0A4" p-id="1439"></path>
<path
d="M231.6 121.9l0.4-0.2 0.1 0.2 3.6-1.7c8.9-3.7 17.9-4.2 24.8-2l1 0.4 0.9-0.8c1.4-0.9 2.8-1.7 4.3-2.3 6-2.5 13.1-2.6 19.7 0.2 11.6 5 18 17.5 16 29.4l-0.1 0.5-2.3 25.5c-0.5 5.9 3.9 10.6 9.2 11l1.6-0.1 3.2-1.7c6.8-3.5 14.9 2.3 14.2 10.1l-2.7 30.2c-0.7 7.8 7.4 13.6 14.5 10 6.8-3.5 14.9 2.3 14.2 10.1l-4.9 54.1v0.6c0 7.9-4.8 16.2-12.8 21.6l-3.1 1.9-0.1-0.2-2.8 1.2c-9.1 3.4-18.6 2.5-25-2.1l-0.5-0.4-47-27.2c-6.8-3.9-6.8-13.9 0-17.4 7.1-3.7 7-13.6 0.2-17.6l-26.2-15c-6.8-3.9-6.8-13.9 0-17.4l3.2-1.7 1-1.2c2.7-4.5 1.4-10.9-3.7-13.8l-22.2-12.9-0.5-0.2c-10.9-5.3-17.4-17.7-14.8-30.1 1.5-7.1 5.6-12.7 11.2-16.2 1.4-0.9 2.8-1.6 4.4-2.2l1.2-0.3 0.3-1c2.4-8 9.4-16.1 19.5-21.3z"
fill="#379966" p-id="1440"></path>
<path
d="M133 909.5c0-24.6 169.7-44.5 379-44.5s379 19.9 379 44.5S721.3 954 512 954s-379-19.9-379-44.5z"
fill="#EDEDEE" p-id="1441"></path>
<path
d="M723.9 573.6L533.3 815.8c-17.2 21.8-48 27.6-72 13.5l-11-6.4c-24-14.1-33.8-43.7-22.9-69.2l120.9-283c24-44.2 101-87.9 130-70.9 39.7 19.4 13.3 6.2 44.5 23.9 28.9 18.8 24.5 116.4 1.1 149.9"
fill="#FB6568" p-id="1442"></path>
<path
d="M519.9 757.7c1 0.2 2 0.6 3 1.2l28.1 18.2c3.7 2.4 4.8 7.4 2.4 11.2-2.4 3.8-7.4 4.8-11.2 2.4l-28.1-18.2c-3.7-2.4-4.8-7.4-2.4-11.2 1.9-2.9 5.1-4.2 8.2-3.6zM457.4 704l12.4 8c3.7 2.4 4.8 7.4 2.4 11.2-2.4 3.8-7.4 4.8-11.2 2.4l-10-6.5 6.4-15.1z m53.8-52.5c1 0.2 2 0.6 3 1.2l28.1 18.2c3.7 2.4 4.8 7.4 2.4 11.2-2.4 3.8-7.4 4.8-11.2 2.4l-28.1-18.2c-3.7-2.4-4.8-7.4-2.4-11.2 1.8-2.8 5.1-4.1 8.2-3.6z m105.2-7.2c0.8-0.1 1.6-0.1 2.3 0.1 1 0.2 2 0.6 3 1.2l28.1 18.2 1.1 1.1-9.8 12.6h-0.1l-28.1-18.2c-3.7-2.4-4.8-7.4-2.4-11.2 1.4-2.3 3.6-3.6 5.9-3.8z m-62.8-59.4c0.8-0.1 1.6-0.1 2.3 0.1 1 0.2 2 0.6 3 1.2l28.1 18.2c3.7 2.4 4.8 7.4 2.4 11.2-2.4 3.8-7.4 4.8-11.2 2.4l-28.1-18.2c-3.7-2.4-4.8-7.4-2.4-11.2 1.4-2.2 3.6-3.4 5.9-3.7z m70.3-35.2c0.8-0.1 1.6-0.1 2.3 0.1 1 0.2 2 0.6 3 1.2l28.1 18.2c3.7 2.4 4.8 7.4 2.4 11.2-2.4 3.8-7.4 4.8-11.2 2.4l-28.1-18.2c-3.7-2.4-4.8-7.4-2.4-11.2 1.4-2.2 3.6-3.5 5.9-3.7z m-83.8-40.9l13 8.5c3.7 2.4 4.8 7.4 2.4 11.2-2.4 3.8-7.4 4.8-11.2 2.4l-10.6-6.9 6.4-15.2z m53.2-53.7c0.8-0.1 1.6-0.1 2.3 0.1 1 0.2 2 0.6 3 1.2l28.1 18.2c3.7 2.4 4.8 7.4 2.4 11.2-2.4 3.8-7.4 4.8-11.2 2.4L589.8 470c-3.7-2.4-4.8-7.4-2.4-11.2 1.4-2.2 3.6-3.5 5.9-3.7z"
fill="#F91F24" p-id="1443"></path>
<path
d="M735.8 196l0.4 0.1v0.2l3.9 0.9c9.2 2.7 16.6 7.7 20.7 13.6l0.5 0.9h1.2c1.6 0.1 3.2 0.4 4.8 0.9 6.3 1.8 11.9 6 15.3 12.1 6 10.8 3.3 24-5.7 31.7l-0.4 0.3-17.6 17.7c-4.1 4.1-3.5 10.3 0.3 13.8l1.3 0.9 3.6 0.7c7.5 1.5 10.3 10.8 4.9 16.2l-20.8 20.9c-5.4 5.4-2.6 14.7 5.2 16.2 7.5 1.5 10.3 10.8 4.9 16.2L721 396.8l-0.4 0.5c-4.9 5.9-13.7 9.2-23.4 8.4l-3.6-0.5v-0.2l-2.9-0.8c-9.2-3-16.1-9.5-18.4-16.8l-0.1-0.6-20-48.9c-2.9-7.1 3.3-14.5 10.8-13 7.8 1.6 14-5.9 11.1-13L663 284.6c-2.9-7.1 3.3-14.5 10.8-13l3.6 0.7 1.5-0.3c4.9-1.8 7.8-7.3 5.6-12.6l-9.4-23.1-0.3-0.5c-5.3-10.6-2.7-23.8 7-31.4 5.5-4.4 12.3-6.1 18.8-5.3 1.6 0.2 3.2 0.5 4.8 1l1.1 0.5 0.9-0.6c6.8-4.5 17.3-6.3 28.4-4z"
fill="#7CD0A4" p-id="1444"></path>
<path
d="M842.7 251.7l-0.3-0.3-0.1 0.1-3.1-2.5c-7.7-5.7-16.2-8.5-23.4-8.2l-1 0.1-0.7-1c-1.1-1.2-2.3-2.3-3.6-3.3-5.2-3.9-12-5.8-18.9-4.7-12.2 1.8-21.1 11.9-21.7 23.8v0.5l-3.3 24.7c-0.8 5.7-6.1 9-11.2 8.1l-1.5-0.5-2.7-2.4c-5.8-5-14.8-1.6-15.8 5.9l-3.9 29.2c-1 7.6-10.1 11-16.1 5.7-5.8-5-14.8-1.6-15.8 5.9l-7 52.4-0.2 0.6c-1.7 7.5 1.1 16.5 7.6 23.7l2.6 2.5 0.2-0.2 2.4 1.9c8 5.5 17.3 7 24.5 4.4l0.5-0.2 51-13.9c7.4-2 9.6-11.4 3.8-16.5-6-5.2-3.8-14.7 3.6-16.7l28.4-7.7c7.4-2 9.6-11.4 3.8-16.5l-2.7-2.4-1.1-1.2c-1.6-5 1-10.6 6.6-12.1l24.1-6.5 0.5-0.1c11.6-2.2 20.5-12.4 20.7-24.7 0.1-7-2.6-13.5-7.2-18.1-1.1-1.2-2.4-2.2-3.7-3.2l-1-0.6v-1.1c-0.8-8.1-5.8-17.5-14.3-24.9z"
fill="#7CD0A4" p-id="1445"></path>
<path
d="M795.7 218.6l0.4 0.2-0.1 0.2 3.5 1.9c8.2 5 14 11.9 16.3 18.8l0.3 1 1.2 0.3c1.5 0.6 3 1.3 4.4 2.1 5.6 3.4 9.8 9 11.5 16 2.8 12.3-3.4 24.9-14.2 30.3l-0.5 0.2-22 13.4c-5.1 3.1-6.2 9.4-3.5 13.9l1 1.2 3.3 1.6c6.9 3.4 7 13.4 0.3 17.4l-25.9 15.7c-6.7 4.1-6.6 14.1 0.6 17.6 6.9 3.4 7 13.4 0.3 17.4L726.1 416l-0.5 0.4c-6.4 4.6-15.9 5.7-25 2.5l-3.3-1.4 0.1-0.2-2.6-1.5c-8.1-5.3-13-13.5-13.2-21.4v-0.6l-5.9-54c-0.9-7.8 7.2-13.8 14-10.4 7.1 3.5 15.2-2.4 14.3-10.2l-3.3-30.1c-0.9-7.8 7.2-13.8 14-10.4l3.3 1.6 1.6 0.1c5.2-0.5 9.6-5.4 8.9-11.2l-2.8-25.5-0.1-0.5c-2.2-11.9 4-24.5 15.5-29.7 6.6-3 13.6-3 19.7-0.6 1.5 0.6 3 1.3 4.4 2.2l0.9 0.8 1-0.4c7.8-2.8 18.5-1.9 28.6 3.1z"
fill="#379966" p-id="1446"></path>
</svg>
<div>
标签
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quisquam quis nihil
quia. Aliquam nesciunt iure pariatur sed amet adipisci?</span>
</div>
</a>
</li>
<li>
<a href="#">
<svg t="1586171890935" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1644" width="32" height="32">
<path
d="M133 909.5c0-24.6 169.7-44.5 379-44.5s379 19.9 379 44.5S721.3 954 512 954s-379-19.9-379-44.5z"
fill="#EDEDEE" p-id="1645"></path>
<path
d="M299.4 823.3C259.5 789.1 450.4 618 528.5 618s277.8 171.1 239.7 205.3c-38.2 34.3-428.8 34.3-468.8 0z"
fill="#66605A" p-id="1646"></path>
<path
d="M696.9 167c-122 139.2-185.5 322.3-173.5 510 3.6-0.2 7.1-0.5 10.7-0.7-11.8-184.8 50.7-365.1 170.9-502.2-2.7-2.4-5.4-4.7-8.1-7.1z"
fill="#44BC7D" p-id="1647"></path>
<path d="M458.9 377c-28.1 84.4 14 161.7 74.4 167 8.8-72.9-17.1-145.8-74.4-167z" fill="#7CD0A4"
p-id="1648"></path>
<path
d="M668 446.5c-19.7 57.4-74.1 102.6-135 97 9.9-76.7 78.1-118.2 135-97zM515.2 246c-42.1 78.7-14.1 162.1 44.1 178 21.1-70.1 8.3-146.9-44.1-178z"
fill="#7CD0A4" p-id="1649"></path>
<path
d="M709 351.2c-29.5 53.8-90.9 89-150 72.8 23.1-74.3 97.6-103.9 150-72.8zM594 127c-55.9 69.9-42.7 156.2 12.1 182 33.1-64.7 34.3-142.4-12.1-182z"
fill="#7CD0A4" p-id="1650"></path>
<path
d="M767 264.2c-38.9 47.6-105.6 71.1-161 44.9 35.8-68.2 114.8-84.4 161-44.9zM781 93c-15.5 67.4-65.6 122.7-130.5 143-7.1-68.9 60.1-142.8 130.5-143z"
fill="#7CD0A4" p-id="1651"></path>
<path
d="M560.2 561.1c-9.4 5.5-18 13.2-25.4 21.7-1.3 18.3-1.9 36.7-1.7 55.1 4.8-26.9 17.7-48.6 34-62.8 24.7-21.7 51.4-24.3 80-19.8-29.3-9.6-57.3-11.7-86.9 5.8zM501.2 573.8c8.2 7.7 15.4 16.9 21.8 26.4-0.8 18.5-0.9 37.1-0.3 55.8-6-27.5-16.9-50.3-30.6-68.2-23.9-31.2-48.6-39.6-74.1-41.3 27-4.3 53.9-0.6 83.2 27.3zM781.8 426C702.5 516.9 661.2 636.4 669 759c2.3-0.1 4.6-0.3 7-0.4-7.7-120.7 33-238.4 111.1-327.9-1.8-1.6-3.6-3.1-5.3-4.7z"
fill="#44BC7D" p-id="1652"></path>
<path d="M626.8 563c-18.2 55.1 9.1 105.6 48.2 109 5.6-47.6-11.2-95.2-48.2-109z" fill="#7CD0A4"
p-id="1653"></path>
<path
d="M763 608.6c-12.9 37.3-48.3 66.7-88 63.1 6.5-49.9 50.9-76.9 88-63.1zM663.4 478c-27.9 51.3-9.4 105.6 29.2 116 14-45.7 5.5-95.8-29.2-116z"
fill="#7CD0A4" p-id="1654"></path>
<path
d="M790 546.8c-19.3 34.5-59.4 57-98 46.6 15.1-47.5 63.8-66.5 98-46.6zM715 400c-37.3 45.7-28.5 102.2 8.1 119 22-42.3 22.8-93.1-8.1-119z"
fill="#7CD0A4" p-id="1655"></path>
<path
d="M828 489.8c-25.4 30.9-68.8 46.2-105 29.2 23.4-44.4 74.9-54.9 105-29.2zM837 378c-10.1 43.8-43.1 79.8-85.7 93-4.6-44.8 39.5-92.9 85.7-93z"
fill="#7CD0A4" p-id="1656"></path>
<path
d="M692.6 683.5c-6.1 3.6-11.7 8.5-16.5 14-0.8 11.8-1.2 23.6-1.1 35.5 3.1-17.4 11.5-31.3 22.1-40.4 15.8-13.7 32.9-15.7 51.9-12.7-18.4-6.2-36.7-8-56.4 3.6zM653.9 691.7c5.3 5 10 11 14.1 17.1-0.5 12-0.6 24.1-0.2 36.2-3.9-17.9-11-32.6-19.8-44.2-15.3-20-31.3-25.6-48-26.8 17.5-2.8 35-0.3 53.9 17.7zM242.2 438c79.3 90.9 120.6 210.4 112.8 333-2.3-0.1-4.6-0.3-7-0.4 7.7-120.7-33-238.4-111.1-327.9 1.8-1.6 3.6-3.1 5.3-4.7z"
fill="#44BC7D" p-id="1657"></path>
<path
d="M398.1 575c18.5 55.1-9.2 105.6-49 109-5.8-47.6 11.3-95.2 49-109zM261 620.6c12.9 37.3 48.3 66.7 88 63.1-6.5-49.9-50.9-76.9-88-63.1zM360.9 490c27.3 51.3 9.2 105.6-28.6 116-13.7-45.7-5.4-95.8 28.6-116zM234 558c19.3 35.1 59.4 58 98 47.4-15.1-48.4-63.8-67.7-98-47.4zM309.5 412c36.5 45.7 27.9 102.2-7.9 119-21.6-42.3-22.4-93.1 7.9-119zM197 501.8c25.1 30.9 68.2 46.2 104 29.2-23.2-44.4-74.2-54.9-104-29.2zM187 390c10.1 43.8 43.1 79.8 85.7 93 4.6-44.8-39.5-92.9-85.7-93z"
fill="#7CD0A4" p-id="1658"></path>
<path
d="M331.4 695.5c6.1 3.6 11.7 8.5 16.5 14 0.8 11.8 1.2 23.6 1.1 35.5-3.1-17.4-11.5-31.3-22.1-40.4-15.8-13.7-32.9-15.7-51.9-12.7 18.4-6.2 36.7-8 56.4 3.6zM370.1 703.7c-5.3 5-10 11-14.1 17.1 0.5 12 0.6 24.1 0.2 36.2 3.9-17.9 11-32.6 19.8-44.2 15.3-20 31.3-25.6 48-26.8-17.5-2.8-35-0.3-53.9 17.7z"
fill="#44BC7D" p-id="1659"></path>
</svg>
<div>
关于
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis porro, est provident
natus laudantium amet delectus id ut ipsum mollitia?</span>
</div>
</a>
</li>
</ul>
</nav>
</body>
</html>
上面是作者实践的效果，建议复制到编辑器观看，其中图标是采用了 iconfont svg 并配合 emmet 插件 的 lorem 生成的英文单词
原文：https://css-tricks.com/flexbox-bar-navigation/
标签：Flex,font,list,width,nav,模块,main,导航,amet 来源： https://www.cnblogs.com/xiaolantian/p/12649847.html