# 用flex 实现圣杯布局和双飞翼布局一样的效果？？？不是很强但是很骚
## 引言：Flex布局的魅力与挑战
在Web前端的世界里，布局设计一直是开发者们的热议话题。圣杯布局（Holy Grail Layout）和双飞翼布局（Double Flying Wing Layout）作为经典的三栏布局模式，长久以来一直备受推崇。然而，随着CSS Flexbox（弹性盒布局模型）的普及，我们有机会用一种更简洁、更直观的方式来实现这两种布局效果。本文将带领大家一起探索如何运用Flex布局实现圣杯布局和双飞翼布局，感受其既不是特别复杂却相当巧妙的一面。
### **一、重温经典：圣杯布局与双飞翼布局**
- **圣杯布局**：中心栏宽度固定，两侧栏宽度自适应，且两侧栏分别位于中心栏的两边，始终保持在视口边缘。
- **双飞翼布局**：与圣杯布局相似，同样是三栏布局，主要区别在于两侧栏放置顺序和浮动实现方式略有不同。
### **二、Flex布局初识**
Flex布局是CSS3中的一项革命性特性，通过`display: flex`或`display: inline-flex`属性开启，可实现元素的弹性布局，解决以往布局方式中许多棘手的问题。
### **三、Flex实现圣杯布局**
**HTML结构：**
```html
<div class="container">
<div class="left">Left Column</div>
<div class="center">Center Column</div>
<div class="right">Right Column</div>
</div>
```
**CSS样式：**
```css
.container {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.left,
.right {
flex-basis: calc(25% - 20px); /* 侧栏宽度自适应，预留间距 */
margin: 10px; /* 侧栏与中心栏之间的间距 */
}
.center {
flex-basis: calc(50% - 40px); /* 中心栏宽度固定 */
order: 1; /* 通过order属性调整元素排列顺序 */
}
/* 为移动端或窄屏设备调整布局 */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.left,
.center,
.right {
flex-basis: auto;
margin: 10px 0;
}
}
```
### **四、Flex实现双飞翼布局**
**HTML结构不变**
**CSS样式调整：**
```css
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.left,
.right {
flex-basis: calc(25% - 20px);
margin-right: 10px; /* 右侧栏与中心栏间距 */
}
.right {
margin-left: 10px; /* 左侧栏与中心栏间距 */
}
.center {
flex-basis: calc(50% - 40px);
order: 2;
}
/* 移动端或窄屏设备布局调整同圣杯布局 */
```
### **五、Flex布局的优势与局限**
尽管Flex布局简化了实现圣杯布局和双飞翼布局的过程，但它并非万能解药。在某些特定场景下，如兼容性问题、嵌套布局需求较复杂的情况下，可能仍需要借助Grid布局或者其他传统布局方式。
### **六、结语：**
Flex布局为我们打开了新的布局设计思路，让开发者能够更优雅、更高效地实现诸如圣杯布局和双飞翼布局这样的经典布局。尽管它在某些情况下并不总是最完美的解决方案，但其带来的便利性与创新性无疑值得我们在实际项目中积极探索和运用。下次当你面临多栏布局挑战时，不妨尝试用Flex布局来“骚”一把，或许你会发现不一样的惊喜！