Flex 布局实例教程
2019独角兽企业重金招聘Python工程师标准>>>
主要参考资料是Landon Schropp的文章和Solved by Flexbox。
一、骰子的布局
骰子的一面,最多可以放置9个点。
下面,就来看看Flex如何实现,从1个点到9个点的布局。你可以到codepen查看Demo。
如果不加说明,本节的HTML模板一律如下。
<div class="box"><span class="item"></span> </div>
上面代码中,div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目。如果有多个项目,就要添加多个span元素,以此类推。
1.1 单项目
首先,只有左上角1个点的情况。Flex布局默认就是首行左对齐,所以一行代码就够了。
.box {display: flex; }
设置项目的对齐方式,就能实现居中对齐和右对齐。
.box {display: flex;justify-content: center; }
.box {display: flex;justify-content: flex-end; }
设置交叉轴对齐方式,可以垂直移动主轴。
.box {display: flex;align-items: center; }
.box {display: flex;justify-content: center;align-items: center; }
.box {display: flex;justify-content: center;align-items: flex-end; }
.box {display: flex;justify-content: flex-end;align-items: flex-end; }
1.2 双项目
.box {display: flex;justify-content: space-between; }
.box {display: flex;flex-direction: column;justify-content: space-between; }
.box {display: flex;flex-direction: column;justify-content: space-between;align-items: center; }
.box {display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end; }
.box {display: flex; }.item:nth-child(2) {align-self: center; }
.box {display: flex;justify-content: space-between; }.item:nth-child(2) {align-self: flex-end; }
1.3 三项目
.box {display: flex; }.item:nth-child(2) {align-self: center; }.item:nth-child(3) {align-self: flex-end; }
1.4 四项目
.box {display: flex;flex-wrap: wrap;justify-content: flex-end;align-content: space-between; }
HTML代码如下。
<div class="box"><div class="column"><span class="item"></span><span class="item"></span></div><div class="column"><span class="item"></span><span class="item"></span></div> </div>
CSS代码如下。
.box {display: flex;flex-wrap: wrap;align-content: space-between; }.column {flex-basis: 100%;display: flex;justify-content: space-between; }
1.5 六项目
.box {display: flex;flex-wrap: wrap;align-content: space-between; }
.box {display: flex;flex-direction: column;flex-wrap: wrap;align-content: space-between; }
HTML代码如下。
<div class="box"><div class="row"><span class="item"></span><span class="item"></span><span class="item"></span></div><div class="row"><span class="item"></span></div><div class="row"><span class="item"></span><span class="item"></span></div> </div>
CSS代码如下。
.box {display: flex;flex-wrap: wrap; }.row{flex-basis: 100%;display:flex; }.row:nth-child(2){justify-content: center; }.row:nth-child(3){justify-content: space-between; }
1.6 九项目
.box {display: flex;flex-wrap: wrap; }
二、网格布局
2.1 基本网格布局
最简单的网格布局,就是平均分布。在容器里面平均分配空间,跟上面的骰子布局很像,但是需要设置项目的自动缩放。
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; }
2.2 百分比布局
某个网格的宽度为固定的百分比,其余网格平均分配剩余的空间。
HTML代码如下。
<div class="Grid"><div class="Grid-cell u-1of4">...</div><div class="Grid-cell">...</div><div class="Grid-cell u-1of3">...</div> </div>
.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布局,让底栏总是出现在页面的底部。
HTML代码如下。
<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; }
七,流式布局
每行的项目数固定,会自动分行。
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; }
(完)
转载于:https://my.oschina.net/Cubicluo/blog/717934
Flex 布局实例教程相关推荐
- flex布局详细教程
flex布局 网页布局(layout)是CSS的一个重点应用. 传统的布局有下面几种. display: block; display: inline; display: list-item; dis ...
- Bootstrap4+MySQL前后端综合实训-Day01-PM【position定位的四种方式、Flex布局语法教程及案例(概念、容器属性、项目属性)、双飞翼布局复习、Bootstrap4 教程】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程 博客汇总表 详细笔记] 目 录 HTML中的三种元素(块元素.内联元素.内联块元素) position定位的四种方式 ...
- Flex 布局语法教程
flex-wrap属性 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. ps:面试 ...
- Flex布局完全教程
背景介绍 Flexbox 布局(也叫Flex布局,弹性盒子布局)模块目标在于提供一个更有效地布局.对齐方式,并且能够使父元素在子元素的大小未知或动态变化情况下仍然能够分配好子元素之间的间隙. Flex ...
- html a字体字号,A标签字体大小css布局实例教程
html超链接A标签字体大小设置教程篇 超链接a标签内文字配置色调,旋转超链接色调样式人人或是对比熟悉,那末偶然一篇文章或一个段落,或一个小一部分使用a锚文本超链接,需要css设置装备摆设差距字体大小 ...
- CSS网页制作布局实例教程
本教程最终效果如下(浏览示例页面): 本教程素材及页面源代码下载 教程的每个部分都有其侧重点,其中前三节都是关于素材制作与设计的,要求有一定的Photoshop操作基础,我想这也是网页设计必备的基础技 ...
- android动态布局实例教程,Android 动态解析布局,实现制作多套主题
问题背景: 之前做过一个项目(随心壁纸),主要展示过去每期的壁纸主题以及相应的壁纸,而且策划要求,最好可以动态变换主题呈现方式,这样用户体验会比较好.嗯,好吧,策划的话,咱们也没法反驳,毕竟这样搞,确 ...
- < CSS技巧 之 弹性布局( Flex布局 ) - 实例篇 >
文章目录
- CSS 7:网页布局(传统布局,flex布局,布局套路)
传统布局 一栏.两栏.三栏布局 一栏布局 特点:页面内容居中,宽度固定 实现方式: 定宽 + 水平居中 width: 1000px; //或 max-width: 1000px; margin-lef ...
最新文章
- CTFshow 文件上传 web157
- 第一次接触AgilePoint业务流程及任务管理(BPM)
- PDA开发系列:GPS模块的调用
- oracle一页显示15行,oracle rownum分页与显示记录小测
- 视图添加字段_使用ExploreByTouchHelper辅助类为自定义视图添加虚拟视图
- jquery实现的时间轴
- 一起谈.NET技术,DataTable 深入解析数据源绑定原理之高级篇
- [GIS教程] 6 空间数据采集与处理-GIS数据源分类及其特征、采集与处理的基本流程、4D产品
- 2020年最新测绘规范目录(可下载在线查看相关规范)
- python: 产品选型小软件
- 实现工地实名制门禁管理的人脸识别系统
- 电商运营数据分析常用分析指标--概述及流量指标
- CUDA安装教程及调试:本机win10+vs2013+NVIDIA GeForce GTX 1050Ti
- 树莓派编译工作空间卡死
- 【攻防世界】REVERSE新手练习区 - Hollo,CTF
- CAD中如何更改标注尺寸保留小数点后几位或单位
- 本地项目开启http-server服务
- 《Flutter 控件大全》第八十三:showDialog、showCupertinoDialog、showSearch、showMenu等
- unity存储系统(Save)
- python的py文件打包exe可执行文件(传参+读取文件)
热门文章
- tuxedo连接mysql,tuxedo详细安装的步骤.doc
- html session登陆验证,原创 实现session登陆时间的验证,验证用户登录页面的一个监听器...
- node 的多进程架构
- WebSocket了解一下
- 合肥信息技术职业学院计算机模拟考试准考证,【通知】全国计算机等级考试模拟测试通知...
- 2029.石子游戏 IX-LeetCode
- 高考计算机专业最低分数线是多少,2021最低多少分可以稳上二本 高考二本分数线是多少...
- java 找序列最小值_【C++编程练习】任意给定 n 个有序整数,求这 n 个有序整数序列的最大值,中位数和最小值...
- ajax没效果,ajax没有效果
- mysql独立开发_nacos的mysql独立部署