巧用flex布局做导航菜单

马黑黑 发表于 2023-1-11 23:35

本帖最后由马黑黑于 2023-1-12 09:25 编辑 <style>
#mydiv {
margin: auto;
display: flex;
align-items: center;
width: 600px;
height: 40px;
border: 1px solid olive;
}
.menu-item {
width: 60px;
height: 24px;
font: normal 16px/24px sans-serif;
color: snow;
text-align: center;
text-shadow: 1px 1px 1px #000;
box-shadow: 2px 1px 4px #333;
border-radius: 3px;
padding: 4px;
margin: 0 4px;
background: linear-gradient(to right bottom, gold, gray);
cursor: pointer;
transition: .7s;
}
.menu-item:hover {
color: yellow;
font-weight: bold;
box-shadow: 4px 2px 8px #111, -2px -1px 4px #ccc;
}
</style>

<div id="mydiv">
Menu1
Menu2
Menu3
Menu4
Menu5

Menu6
</div>
<div style="height: 360px;"></div>

马黑黑 发表于 2023-1-11 23:38

代码： 

<pre style="padding: 10px;color:#000000; background-color:#eeeeee; font-size:10pt; font-family:'DejaVu Sans Mono';white-space: pre-wrap;"><style>
#mydiv {
margin: auto;
display: flex;
align-items: center;
width: 600px;
height: 40px;
border: 0px solid olive;
}
.menu-item {
width: 60px;
height: 24px;
font: normal 16px/24px sans-serif;
color: snow;
text-align: center;
text-shadow: 1px 1px 1px #000;
box-shadow: 2px 1px 4px #333;
border-radius: 3px;
padding: 4px;
margin: 0 4px;
background: linear-gradient(to right bottom, gold, gray);
cursor: pointer;
transition: .7s;
}
.menu-item:hover {
color: yellow;
font-weight: bold;
box-shadow: 4px 2px 8px #111, -2px -1px 4px #ccc;
}
</style>

<div id="mydiv">
<span class="menu-item">Menu1</span>
<span class="menu-item">Menu2</span>
<span class="menu-item">Menu3</span>
<span class="menu-item">Menu4</span>
<span class="menu-item">Menu5</span>
<span style="flex-grow: 1"></span>
<span class="menu-item">Menu6</span>
</div>
</pre>

马黑黑 发表于 2023-1-11 23:44

菜单项尺寸一致，自左向右排列，最后一个菜单项右对齐。

flex布局出现以前，我们需要用float或表格等比较笨拙的方法将最后一项右对齐，而现在，flex可以轻松实现。上述代码没什么难度，实现技巧体现在 flex-grow 属性上，html代码中的



是虚占位的，它的 flex-grow 值为 1，达到的效果是中间所有的空间由它来霸占。

红影发表于 2023-1-12 09:20

马黑黑发表于 2023-1-11 23:44
菜单项尺寸一致，自左向右排列，最后一个菜单项右对齐。

flex布局出现以前，我们需要用float或表格等比 ...

干嘛要设置最后一项右对齐，是为了让大家体验flex布局的用法吧{:4_204:}

马黑黑 发表于 2023-1-12 09:24

红影发表于 2023-1-12 09:20
干嘛要设置最后一项右对齐，是为了让大家体验flex布局的用法吧

一般来说，导航菜单左右都应有菜单项目，左边一组自然排列，右边一组量较少，可能就是一两个。两组中间有空余部分，可以利用它的占位行为来达到布局目的。

如果我加入导航条的边框或背景色，就容易看得出来了。我去改改。

红影发表于 2023-1-12 11:28

马黑黑发表于 2023-1-12 09:24
一般来说，导航菜单左右都应有菜单项目，左边一组自然排列，右边一组量较少，可能就是一两个。两组中间有 ...

嗯嗯，看到边框了，这个占位和霸道，剩下的都被它占去了{:4_173:}

马黑黑 发表于 2023-1-12 11:31

红影发表于 2023-1-12 11:28
嗯嗯，看到边框了，这个占位和霸道，剩下的都被它占去了

就这意思哈。你再在回复帖子弹出的编辑框上仔细看，“高级模式”链接是不是在右边，它和左边的图标中间是不是隔开一定的距离？

红影发表于 2023-1-12 12:49

马黑黑发表于 2023-1-12 11:31
就这意思哈。你再在回复帖子弹出的编辑框上仔细看，“高级模式”链接是不是在右边，它和左边的图标中间是 ...

嗯嗯，是的，原来是被这个命令弄的{:4_187:}

马黑黑 发表于 2023-1-12 13:17

红影发表于 2023-1-12 12:49
嗯嗯，是的，原来是被这个命令弄的

那不一定。discuz开发的比较早，那时候 flex 还不流行甚至还没有制定好标准。discuz用很多的table标签就能说明这一点。它可能用表格布局或浮动布局，我没有细看代码。

红影发表于 2023-1-12 14:18

马黑黑发表于 2023-1-12 13:17
那不一定。discuz开发的比较早，那时候 flex 还不流行甚至还没有制定好标准。discuz用很多的table标签就 ...

我是完全不懂，更不会去看它的代码{:4_173:}

马黑黑 发表于 2023-1-12 19:00

红影发表于 2023-1-12 14:18
我是完全不懂，更不会去看它的代码

明白

红影发表于 2023-1-12 20:17

马黑黑发表于 2023-1-12 19:00
明白

问题是，想看也看不懂{:4_173:}

马黑黑 发表于 2023-1-12 21:11

红影发表于 2023-1-12 20:17
问题是，想看也看不懂

这没有关系，知道有这么一回事就好

红影发表于 2023-1-12 21:41

马黑黑发表于 2023-1-12 21:11
这没有关系，知道有这么一回事就好

嗯嗯，黑黑说过了就知道了。

马黑黑 发表于 2023-1-12 22:32

红影发表于 2023-1-12 21:41
嗯嗯，黑黑说过了就知道了。

任何产品的背后都凝聚了巨大的劳动

红影发表于 2023-1-13 10:08

马黑黑发表于 2023-1-12 22:32
任何产品的背后都凝聚了巨大的劳动

是啊，太不容易了。

马黑黑 发表于 2023-1-13 11:36

红影发表于 2023-1-13 10:08
是啊，太不容易了。

世上没有容易的事情

红影发表于 2023-1-13 16:41

马黑黑发表于 2023-1-13 11:36
世上没有容易的事情

但是有相对容易的。

马黑黑 发表于 2023-1-13 20:52

红影发表于 2023-1-13 16:41
但是有相对容易的。

相对的就是差不多的意思了

红影发表于 2023-1-13 22:53

马黑黑发表于 2023-1-13 20:52
相对的就是差不多的意思了

又来了{:4_172:}

页: [1] 2 3

花潮论坛's Archiver

巧用flex布局做导航菜单