CSS双飞翼布局的两种方式实现示例

双飞翼布局是一种经典且实用的网页布局方式，它实现了三栏布局中两端固定宽高，中间自适应的效果。接下来，我们将详细介绍两种实现该布局的方法。

方法一：使用Flex弹性布局

我们先来看一下HTML结构。页面中包含三个div元素，分别表示三栏布局中的三个部分。其中，中间的自适应区域由div2表示。

在样式方面，我们先对全局的浏览器默认样式进行了重置，以保证页面的布局不受影响。然后，我们给`.wrap`类添加了`display: flex`属性，使其成为一个弹性容器。通过`flex-flow:row nowrap`，我们让子元素沿主轴方向排列，并且不换行。这样，三个div就会水平排列。

对于两端的div（`.div1`和`.div3`），我们给它们设置了固定的宽度和背景颜色，并使用了`flex-shrink: 1`来确保它们在弹性布局中可以缩小。而中间的div2则通过`flex-grow: 1`来占据剩余的空间，实现自适应布局。

方法二：使用定位实现

HTML结构不变，但在样式上有所不同。我们给`.wrap`类添加了`position: relative`属性，使其成为一个相对定位的容器。这样，我们可以让子元素相对父元素进行定位。

对于两端的div（`.div1`和`.div3`），我们给它们设置了绝对定位，并固定在容器的左侧和右侧。中间div2则通过左右两侧的外边距来适应剩余的空间，实现自适应布局。这种方法的实现关键在于没有给中间div添加固定的宽度，而是利用外边距来占据空间。

这两种方法都能实现双飞翼布局的效果，各有优劣。使用Flex布局的方法更加灵活和简洁，是现代网页布局的常用方法。而使用定位的方法则更加传统，对于一些老的浏览器有更好的兼容性。

双飞翼布局是一种非常实用的网页布局方式。相信大家已经掌握了两种实现该布局的方法。在实际开发中，可以根据需求和实际情况选择合适的方法。也希望大家能多多支持狼蚁SEO，共同学习进步。