巧用flex布局做导航菜单

马黑黑

Menu1 Menu2 Menu3 Menu4 Menu5 Menu6

马黑黑

代码：

<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>

马黑黑

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

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

    <span style="flex-grow: 1"></span>

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

红影

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

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

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

马黑黑

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

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

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

红影

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

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

马黑黑

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

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

红影

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

嗯嗯，是的，原来是被这个命令弄的

马黑黑

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

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

红影

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

我是完全不懂，更不会去看它的代码

马黑黑

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

明白

红影

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

问题是，想看也看不懂

马黑黑

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

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

红影

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

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

马黑黑

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

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

红影

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

是啊，太不容易了。

马黑黑

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

世上没有容易的事情

红影

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

但是有相对容易的。

马黑黑

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

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

红影

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

又来了