flex 实现的圣杯布局

于 2023-10-08 16:29:47 发布
阅读量121 收藏
点赞数
分类专栏： CSS-头脑风暴 文章标签： 前端 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35241329/article/details/133684757
版权
本文介绍了如何利用 CSS 的 flex 布局实现经典的圣杯布局。关键点包括使用 margin-left 和 left 将左右两列定位，设置父元素 padding，以及理解 margin-left 百分比基于父元素宽度。与双飞翼布局不同的是，圣杯布局的三列容器直接通过父元素 padding 来创建两侧空间。
摘要由CSDN通过智能技术生成
  • 关键点
    通过 margin-left 与 left 属性将左右两列放置到准确的位置；
    父元素需要设置 padding；
    margin-left 取值为百分比时，是以其父元素的宽度为基准的；
  • 和双飞翼不同的地方
    圣杯布局的的左中右三列容器没有多余子容器存在，通过控制父元素的 padding 空出左右两列的宽度。

html：

<div class="container">
  <div class="middle
了解本专栏 订阅专栏 解锁全文 超级会员免费看
timi先生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
CSS Flex布局 （弹性布局）(圣杯布局)
m0_69793485的博客
05-14 580
Flex布局（弹性布局）的特点 1.浏览器提倡的布局模型，页面渲染性很高。 2.布局简单，方便。 3.可以避免浮动脱标的问题。 4.兼容性高（不兼容低版本的浏览器） Flex布局模型构成 设置方式： 给父元素设置display:flex,子元素可以自动的挤压或拉伸； 组成部分 1.弹性容器（父级，添加了display:flex的盒子） 2.弹性盒子（子级） 3.主轴（默认水平） 4.侧轴 / 交叉轴（默认垂直） 主轴对齐方式 justify-content： flex-star
flex做的圣杯布局
weixin_30279751的博客
09-28 167
　　　now，给大家分享一个用flex写的圣杯布局，大家可以参考一下子 　　　首先圣杯布局是两列固定宽度，中间自适应。 　　　我直接说一下步骤，上图，上图 　　　　 　　　1.步骤1 　　　 　　2.步骤2 　　　　 　　　　上面就是基本的步骤，下面我把代码给大家，大家感兴趣自己拿回去偷偷的撸就可以 　　　　 <!DOCTYPE html> <ht...
圣杯布局(flex)
m0_47384945的博客
04-10 110
【代码】圣杯布局(flex)
Flex圣杯布局(简易)
vGuYi的博客
05-14 293
就像圣杯一样无论中间的内容大小如何改变(自适应)两边的盒子都是不变的 圣杯布局原理 效果图如下 html部分 <body> <div class="box"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div&gt
flex 实现圣杯布局
weixin_30640769的博客
06-15 61
参考教程：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html <style type="text/css"> #container{ display: flex; flex-direction: column;/*纵向排序*/ } header, footer{...
圣杯布局：这是圣杯布局
02-17
以下是实现圣杯布局的关键技术点： 1. **定位策略**：利用CSS的相对定位和绝对定位来控制各个栏的位置。通常，父容器设置为相对定位，而子元素（三栏）设置为绝对定位，以便它们相对于父容器定位。 2. **负边距**...
圣杯双飞翼布局.zip
05-04
4. **CSS3 Flexbox**：现代浏览器支持Flexbox布局模型，可以更简洁地实现圣杯布局，通过设置`flex-grow`, `flex-shrink`和`flex-basis`属性调整各栏的尺寸。 **双飞翼布局**： 双飞翼布局是中国前端开发者为了应对...
浅谈CSS三栏布局的Ｎ种实现
09-27
圣杯布局旨在解决三栏布局中内容区域自适应的同时保持侧边栏始终在屏幕边缘。通常利用负margin和相对定位来实现。这种方法的优势在于可以很好地处理内容区域的自适应性，但实现起来较为复杂。 3. **双飞翼布局** ...
CSS相关布局小知识
01-08
其次，当左右两边都需要固定宽度，而中间部分需要自适应时，我们可以使用传统的`float`布局，或者利用`calc`计算属性，还可以应用“圣杯布局”。圣杯布局通常涉及创建边界格式化上下文(BFC)、负值`margin`等技术，以...
Web-前端html+css从入门到精通 184. flex弹性布局（1-7）.mp4.zip.zip
05-23
使用Flexbox实现圣杯布局，可以将整个页面视为一个flex容器，设置`flex-direction: column`，然后将头部、主体和侧边栏作为子元素。对于主体部分，可以再创建一个内部的flex容器，设置`flex-direction: row`，并使用...
使用flex实现圣杯布局
前端小伙子的博客
06-12 3109
使用flex实现经典的圣杯布局。
圣杯布局进阶版-flex布局实现
weixin_34026276的博客
04-20 316
内部运营平台常见布局，要求如下 ① 网页的最小宽度为1200px ② 顶部栏始终处于浏览器顶端 ③ 内容模块宽度需要自适应，需要自动铺满左侧栏跟右侧栏留下来的空间 ④ 内容模块高度需要自适应，需要自动铺满顶部栏跟底部栏留下来的空间，当三者高度之和大于浏览器高度时，内容模块跟底部栏处出现滚动条，顶部栏固定 源码地址： github.com/ZYuMing/Blo… 效果图： ①顶部栏+内容模块+...
flex常用布局之圣杯布局
Z181L的博客
07-21 111
css移动端flex布局方法之圣杯布局
圣杯布局与双飞翼布局还有flex布局实现两边固定宽度中间自适应布局
WaiKam_Lau的博客
03-16 387
圣杯布局、双飞翼布局 这两个布局的功能都是相同的，都是两侧宽度固定，中间宽度自适应的三栏布局。 他们都有一些相同的特点： 两侧的宽度固定，中间宽度自适应 中间一栏在DOM结构上优先于两个侧栏，为了以便优先渲染中间栏 允许三列任意一列称为最高列 只需要一个额外的div标签包裹 圣杯布局 1、DOM结构 <div class="header"></div> <div ...
圣杯布局的三种实现方式（定位浮动、flex）
qq_40721240的博客
05-19 273
常见面试题圣杯布局
圣杯布局实现
Clover ‘s Blog
05-17 1010
css
flex基础知识点+圣杯布局
weixin_43795844的博客
07-30 240
flex基础知识+圣杯布局
圣杯布局（三种方法）
weixin_62716073的博客
08-01 1598
在 CSS 中的用法主要用于弹性盒子布局，它允许子元素根据容器的剩余空间进行放大和缩小，以实现响应式布局。第三个方法中需要注意的是元素排列顺序，由于浮动元素影响不了上级的块级元素所以一定注意div元素先后顺序。1.2 给左右盒子的 width 设置父盒子的 padding 值,2.1 父盒子设置 display:flex;3、利用 bfc 块级格式化上下文, 实现两侧固定中间自适应。2.3 中间盒子设置 flex:1;2、利用 flex 布局实现两侧固定中间自适应。1、利用定位实现两侧固定中间自适应。
圣杯布局的四种实现方式
llj1028的博客
12-29 2201
圣杯布局
通过flex实现圣杯布局
最新发布
11-19
以下是使用flex实现圣杯布局的方法： HTML代码： ```html <div class="main">Main Content <div class="left">Left Sidebar <div class="right">Right Sidebar ``` CSS代码： ```css .container { display: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

timi先生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值