弹性盒子响应式布局_轻松弹性响应式站点导航

弹性盒子响应式布局

Very frequently horizontal site navigational elements are required to “stretch” with browser size changes. While flexbox can be used to achieve this kind of layout, and does boast some advantages in doing so, there’s another, frequently overlooked option that employs less code and has far greater cross-browser compatibility.

经常需要水平站点导航元素来“拉伸”浏览器的大小。 虽然flexbox可以用来实现这种布局，并且这样做确实具有一些优势，但是还有另一个经常被忽略的选项，它使用更少的代码并且具有更大的跨浏览器兼容性。

I’ll explore both possibilities, using navigation for the fictional Snap-Tite Rubber Company as an example. The base HTML will be the same in both cases:

我将以虚构的Snap-Tite Rubber Company的导航为例，探讨两种可能性。 在两种情况下，基本HTML都相同：

<header>
	<h1>Snap-Tite Rubber Co.</h1>
	<nav>
		<a href="#">Home</a>
		<a href="#">About</a>
		<a href="#">Basic Services</a>
		<a href="#">Specialty Services</a>
		<a href="#">Contact Us</a>
	</nav>
</header>

There’s also CSS that’s shared in both solutions:

两种解决方案中还共享CSS ：

header {
	background-image: url(light_toast.png);
	text-transform: uppercase;
	text-align: center;
}
h1 { 
	font: 4rem "Bree Serif";
	text-shadow: -1px -1px 1px rgba(255,255,255,0.4),
		1px 1px 1px rgba(0,0,0,0.4);
	color: rgba(255,255,255,0.6);
	padding-top: 1rem;
	opacity: 0.3;
	line-height: 1;
	margin: 1.5rem;
}
header nav { 
	font-weight: 100; 
	font-family: Agenda-Light, Agenda, Arial, sans-serif; 
}
header nav a { 
	text-decoration: none; 
	font-size: 1.4rem;
	color: #333;
	background: rgba(255,255,255,0.4);
	transition: .6s;
	padding: .5rem;
}
header nav a:list-child {
	border-right: none;
}
header nav a:hover {
	background: rgba(0,0,0,0.5);
	color: #fee;
}

The rest of the CSS is unique to one solution or another.

CSS的其余部分是一种解决方案或另一种解决方案所独有的。

选项1：显示：表格单元格布局 (Option 1: display: table-cell layout)

The easiest way to create stretchy navigation is to use display: table and related values. I’m assuming for this example that the design also calls for the links to be vertically aligned on their centers:

创建延展性导航的最简单方法是使用display: table和相关值。 在此示例中，我假设设计还要求链接在其中心垂直对齐：

header nav {
	display: table;
	width: 100%;
}
header nav a {
	display: table-cell;
	vertical-align: middle;
}

At this point, you are relying on the content of each link to determine its width. Alternatively, you could evenly divide the table cell by using table-layout: fixed:

此时，您将依靠每个链接的内容来确定其宽度。 另外，您可以使用table-layout: fixed均匀地划分表格单元格table-layout: fixed ：

header nav {
	display: table;
	width: 100%;
	table-layout: fixed;
}

Naturally, we also need to cover mobile requirements. The obvious solution is to arrange the links vertically when they start to cram too close together:

自然，我们还需要满足移动需求。 显而易见的解决方案是，当链接开始挤得太近时，垂直排列链接：

@media (max-width: 700px) { 
	header nav a {
		display: table-row;
		width: 100%;
	}
}

The major advantages of this solution are:

该解决方案的主要优点是：

• The syntax is relatively easy
  语法比较容易
• The solution works all the way back to IE8
  该解决方案一直可以追溯到IE8

An alternative, and more recent, solution to create stretchy navigation is to use flexbox.

创建弹性导航的另一种解决方案是使用flexbox 。

选项2：Flexbox布局 (Option2: Flexbox layout)

While flexbox would seem to be the ideal solution, it actually requires significantly more code, even without taking vendor prefixes and previous syntaxes of the spec into account:

尽管flexbox似乎是理想的解决方案，但实际上它需要更多的代码，即使不考虑供应商前缀和规范的先前语法也是如此：

header nav {
	display: flex;
}
header nav a { 
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

However, the responsive design solution is very similar:

但是， 响应式设计解决方案非常相似：

@media (max-width: 700px) { 
	header nav { 
		flex-direction: column;
	}
}

The links themselves need to be display: flex in order to vertically align their content with align-items: center, and flex: 1 1 auto; so that they stretch vertically as well as horizontally. Despite its verbosity, the method does provide more options in the distribution of links, by using space-around or space-between in the justify-content property for the nav element.

链接本身需要display: flex以便将它们的内容与align-items: center和flex: 1 1 auto;垂直对齐flex: 1 1 auto; 这样它们在垂直和水平方向上都会拉伸。 尽管方法很冗长，但通过在nav元素的justify-content属性中使用space-around或space-between ，该方法的确在链接分配中提供了更多选项。

Both approaches have their advantages and disadvantages. It’s entirely possible to use display: table as a fallback solution for a flexbox approach, as the two often achieve similar design goals.

两种方法都有其优点和缺点。 完全有可能使用display: table作为flexbox方法的后备解决方案，因为两者经常达到相似的设计目标。

翻译自: https://thenewcode.com/790/Easy-Stretchy-Responsive-Site-Navigation

弹性盒子响应式布局