Felx布局(三)
来源:互联网 发布:newfound淘宝旗舰店 编辑:程序博客网 时间:2024/05/16 10:06
flex网格布局
平均分布
最简单的网格布局,就是平均分布。在容器里面平均分配空间,跟上面的骰子布局很像,但是需要设置项目的自动缩放
html代码
<!-- 几个元素就几个标签 --><div class="Grid"> <div class="Grid-cell">...</div> <div class="Grid-cell">...</div> <div class="Grid-cell">...</div></div>
css代码
.Grid { display: flex;}/* 平均分布 */.Grid-cell { flex: 1;}
百分比分布
某个网格的宽度为固定的百分比,其余网格平均分配剩余的空间。
html代码
<div class="Grid"> <div class="Grid-cell u-1of4">...</div> <div class="Grid-cell">...</div> <div class="Grid-cell u-1of3">...</div></div>
css代码
.Grid { display: flex;}.Grid-cell { flex: 1;}.Grid-cell.u-full { flex: 0 0 100%;}.Grid-cell.u-1of2 { flex: 0 0 50%;}.Grid-cell.u-1of3 { flex: 0 0 33.3333%;}.Grid-cell.u-1of4 { flex: 0 0 25%;}
圣杯布局
圣杯布局(Holy Grail Layout)指的是一种最常见的网站布局。页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成三栏,从左到右为:导航、主栏、副栏。
html代码
<body class="HolyGrail"> <header>...</header> <div class="HolyGrail-body"> <main class="HolyGrail-content">...</main> <nav class="HolyGrail-nav">...</nav> <aside class="HolyGrail-ads">...</aside> </div> <footer>...</footer></body>
css代码
.HolyGrail { display: flex; min-height: 100vh; flex-direction: column;}header,footer { flex: 1;}.HolyGrail-body { display: flex; flex: 1;}.HolyGrail-content { flex: 1;}.HolyGrail-nav, .HolyGrail-ads { /* 两个边栏的宽度设为12em */ flex: 0 0 12em;}.HolyGrail-nav { /* 导航放到最左边 */ order: -1;}
如果是小屏幕,躯干的三栏自动变为垂直叠加。
@media (max-width: 768px) { .HolyGrail-body { flex-direction: column; flex: 1; } .HolyGrail-nav, .HolyGrail-ads, .HolyGrail-content { flex: auto; }}
输入框的布局
我们常常需要在输入框的前方添加提示,后方添加按钮。
html代码
<div class="InputAddOn"> <span class="InputAddOn-item">...</span> <input class="InputAddOn-field"> <button class="InputAddOn-item">...</button></div>
css代码
.InputAddOn { display: flex;}.InputAddOn-field { flex: 1;}
悬挂式布局
主栏的左侧或右侧,需要添加一个图片栏。
html代码
<div class="Media"> <img class="Media-figure" src="" alt=""> <p class="Media-body">...</p></div>
css代码
.Media { display: flex; align-items: flex-start;}.Media-figure { margin-right: 1em;}.Media-body { flex: 1;}
固定的底栏
有时,页面内容太少,无法占满一屏的高度,底栏就会抬高到页面的中间。这时可以采用Flex布局,让底栏总是出现在页面的底部。
<body class="Site"> <header>...</header> <main class="Site-content">...</main> <footer>...</footer></body>
css代码
.Site { display: flex; min-height: 100vh; flex-direction: column;}.Site-content { flex: 1;}
流式布局
html代码
<div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div></div>
css代码
.parent { width: 200px; height: 150px; background-color: black; display: flex; flex-flow: row wrap; align-content: flex-start;}.child { box-sizing: border-box; background-color: white; flex: 0 0 25%; height: 50px; border: 1px solid red;}
转自阮一峰博客
欢迎大家访问我的博客
0 0
- Felx布局(三)
- Felx布局
- felx三种事件方式
- felx
- 三栏布局(三列布局)
- Android布局(三)TableLayout
- css(三)布局模型
- 页面布局学习(三)
- Android的布局(三)
- CSS3(三)布局样式
- WPF布局篇(三)
- Felx上传功能实现
- felx全屏代码
- felx百叶窗效果
- felx+red5视频
- felx内嵌jsp
- Felx 解析的问题
- html+css布局的三种方式( 自然布局/流动布局 /定位布局)
- 每日一题 No.19 a*b(位操作符)【仅限正数】
- 用GDB调试程序
- Problem A: 字符串类(I)
- 云计算是什么?【科普】
- (ssl2289)庆功会(多重背包)
- Felx布局(三)
- 如何实现和提升软件易用性
- 搬迁
- java中Stack有什么用,举例说明?
- tp5删除
- php常用的函数
- php 魔术方法
- webservices系列(五)——javaweb整合Axis2及多service配置
- sqlite 可视化工具