本文主要是介绍前端之移动端圣杯布局，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
什么是圣杯布局:
所谓的圣杯布局就是左右两边大小固定不变，中间宽度自适应。
一般这种布局方式适用于各种移动端顶部搜索部分，这是最常见的，如京东手机版主页面顶部搜索
核心思路：
-
两侧盒子写固定大小
-
中间盒子 flex: 1; 占满剩余空间
.top {display: flex;justify-content: c;
}
.top div:first-child {width: 50px;height: 50px;background-color: red;
}
.top div:last-child {width: 50px;height: 50px;background-color: red;
}
.top div:nth-child(2) {flex: 1;height: 50px;background-color: pink;
}
注意：中间flex: 1; 和 width 有冲突。 优先执行 flex：1；
这篇关于前端之移动端圣杯布局的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
