CSS Flexbox 布局完全指南 (二):3000字,多示例讲解
理解 Flexbox 最好的方式是什么?学好基础,再大量练习。这正是我们要在这篇文章中做的事情。
在《CSS Flexbox 布局完全指南 Part 1(含示例)》中,我们介绍了如何用 Flexbox 制作一个影片集,如何通过 Flexbox 布局卡片,如何使用 Flexbox 创建网格布局。现在我们继续介绍更多示例。
示例四:如何使用 Flexbox 构建网站布局
社区的伙伴们通常不建议整个网站布局都使用 Flexbox。
虽然我赞同这个观点,但是我也认为在特定的情况下你可以不用考虑这么多。
我能给到最重要的一点建议是:在你需要的时候使用 Flexbox 布局。
我会在下面的例子中解释这点。
圣杯布局
“圣杯布局”是经典的布局方式。
圣杯布局:头部,页脚和 3 个其他容器
有两种 Flexbox 方式可以实现这种布局。
第一种是用 Flexbox 来实现布局。把 header
、footer
、nav
、article
和 aside
都放在一个 flex-container
容器里。
我们开始吧。
标识语言
看一下下面这个基本的标识文本:
<body> <header>Header</header> <main> <article>Article</article> <nav>Nav</nav> <aside>Aside</aside> </main> <footer>Footer</footer></body>
圣杯布局遵循了一条特殊的规则:
中间的那列 article
应该在 nav
和 aside
两个侧边栏之前显示出来。
<article></article>
居中布局且先显示在页面上
建立一个 Flexbox 格式文本
body { display: flex}
因为子元素应该从顶部到底部布局,所以我们要改变 Flexbox 的默认方向。
body { ... flex-direction: column}
- header
和 footer
要有固定的宽度
header,footer { width: 20vh /*you can use pixels e.g. 200px*/}
- main
要填满 flex-container
中剩下的部分
main { flex: 1}
你一定没忘记,flex: 1
表示 flex-grow: 1
,flex-shrink: 1
和 flex-basis: 0
。
这可以让 main
“变大”填满剩下的可用空间
此刻,我们要开始考虑 main
中的 article
,nav
和 aside
三个部分。
把 main
设成一个 flex-container
:
main { display: flex}
给 nav
和 aside
设置固定的宽度:
nav,aside { width: 20vw}
然后确保 article
填满剩下的可用空间:
article { flex: 1}
现在 article
填满剩下的可用空间
现在还需要做一件事:把 flex-items
重新排序,这样 nav
会展示在第一位。
nav { order: -1}
最终效果:
https://codepen.io/ohansemmanuel/full/brzJZz/
order
属性用来重新排序 flex-items
的位置。
容器中所有 flex-items
都会以递增的 order
值排列, flex-item
中 order
值最小的会排列在最前面。
所有的 flex-items
元素默认 order
值都是 0
。
圣杯布局(另一种布局方式)
之前的方式是把 flex-container
作为一个整体的容器,这个布局非常依赖 Flexbox。
我们来了解一种更为适合的方法。首先再来看下最终要达到的效果:
圣杯布局
header
和 footer
可以被当作块状元素。在没有任何干预的情况下,它们会在从顶部到底部,填满父级元素。
<body> <header>Header</header> <main> <article>Article</article> <nav>Nav</nav> <aside>Aside</aside> </main> <footer>Footer</footer></body>
使用这种方法,唯一需要作为 flex-container
的就是 main
元素。
使用这个方法有个缺点就是你要自己计算 main
的高度。main
应该填满除 header
和 footer
外的空间。
main { height: calc(100vh - 40vh);}
上面的代码块使用 CSS 中的 calc
来计算 main
的高度。
不管怎样,main
的高度都要等于 calc(100vh — height of header — height of footer)
。
在之前的解决方案中,header
和 footer
都有一个固定的高度,接下来再通过同样的方法计算 main
的高度。
你可以在这里查看最终效果:
https://codepen.io/ohansemmanuel/full/brzybZ/
两列网页布局
两列布局很常见,这也可以用 Flexbox 轻松实现。
包含边栏和主内容的两列布局
看下以下标识文本:
<body> <aside>sidebar</aside> <main>main</main></body>
先建一个 Flexbox 格式文本:
body { display: flex;}
给 aside
一个固定的宽度:
aside { width: 20vw}
最后,确保 main
填满剩下的可用空间:
main { flex: 1}
这样就差不多可以了。
示例五:使用 Flexbox 布局媒体对象
媒体对象随处可见,从 Twitter 到 Facebook 上的帖子,大部分页面设计似乎都会选择媒体对象。
Twitter 和 Facebook 上的发帖示例
看下下面这个标识文本:
<div class="media"> <img class="media-object" src="/pic.jpg"> <div class="media-body"> <h3 class="media-heading"> Header </h3> <p></p> </div></div>
你应该已经猜到了,.media
会使用 Flexbox 布局:
.media { display: flex}
container
中的 flex-items
默认是在 flex-container
中垂直拉伸,填满可用高度。
确保 .media-body
填满剩下的可用空间:
.media-body { flex: 1}
左边的盒子拉伸填满可见屏幕,媒体主体在媒体对象(白色部分)内横向填满剩下的空间
我们来调整下拉伸的盒子模型。
.media { ... align-items: flex-start}
弹性项目在媒体对象中从起点对齐,现在图片保持默认大小,没有变形拉伸:)
翻转媒体对象
翻转媒体对象是图片在媒体对象的另一边(右边)
创建画报媒体对象不需要改变 html
元素的顺序。
只需要让弹性项目像这样重新排序:
.media-object { order: 1}
这样图片就会排列在 .media-body
和 media-heading
之后。
媒体对象的嵌套
你甚至可以不改变已有的 CSS 样式来继续用嵌套布局媒体对象。
<div class="media"> <img class="media-object" src="/pic.jpg"> <div class="media-body"> <h3 class="media-heading"> Header </h3> <p></p> <!--nested--> <div class="media"> <img class="media-object" src="/pic.jpg"> <div class="media-body"> <h3 class="media-heading"> Header </h3> <p></p> </div> </div><!--end nested--> </div> </div>
可以了!
媒体对象在其中嵌套布局
Unicode 媒体对象
我们不用只拘泥于图片。在不改变已经写好的 CSS 样式情况下,可以用 Unicode 来代替图片。
<div class="media"> <div class="media-object">?</div> <div class="media-body"> <h3 class="media-heading"> Header </h3> <p></p> </div></div>
比如我们放一个 emoji 表情。
带有 emoji 表情的媒体对象
用一个包含相应编码的 div
来替换 img
,显示想要的表情。你可以在 https://emojipedia.org/ 获取更多的 emoji 表情。
HTML 字符实体媒体对象
你也可以使用如下的 HTML 字符实体。
<div class="media"> <div class="media-object">☎</div> <div class="media-body"> <h3 class="media-heading"> Header </h3> <p></p> </div></div>
这里使用的 HTML 字符实体是 ☎ ,效果如下:
你可以在这里查看这些例子的效果:
https://codepen.io/ohansemmanuel/full/jLJbGL/
示例六:如何使用 Flexbox 建立表单元素
现在很难找到没有一两个表单的网站了。
表格输入框,前后加其他元素
看下面这段标识文本:
<form class="form"> <input class="form__field"> <button class="form__item">…</button></form><form class="form"> <span class="form__item">…</span> <input class="form__field"></form><form class="form"> <span class="form__item">…</span> <input class="form__field"> <button class="form__item">…</button></form>
这个例子展示了输入框与按钮或是文字的结合,我们仍可以用 Flexbox 轻松解决。
新建一个 Flexbox 格式文本:
.form { display: flex}
确保输入框填满可用空间:
.form__field { flex: 1}
最后,你可以按照你喜欢的方式在前后放入文字或者按钮。
.form__item { ... }
你可以在这里看到这个例子的完整效果:
https://codepen.io/ohansemmanuel/full/ZJPmNj/
示例七:如何使用 Flexbox 来创建一个手机 App 布局
在这个例子中,我会带你一起来写如下的手机应用布局:
不过这个例子有点不同——为了让你来实践,我会解释创建手机布局的过程,你自己来尝试完成。
第一步
剥离出 iPhone 的页面布局,我们得到下面这个:
基本布局
第二步
将主体部分定义成一个 flex-container
。
将格式化文本建立成一个弹性容器
第三步
flex-container
默认的 flex-direction
属性是 row
。在这个例子中,我们要把它变成 column
。
改变默认布局方向,得到 3 个子元素(即 flex-items
)
第四步
给元素 1 和元素 3 一个固定的高度 height: 50px
。
第五步
元素 2 要有一个填满可用空间的高度。使用 flex-grow
或是简写的 flex
写法 flex: 1
。
第六步
最后,像之前的例子一样,把每个块状元素当成一个媒体对象。
把内容块当成媒体对象
按照上面的六个步骤,你就可以成功创建一个手机应用布局。
- Redis 数据结构与内存管理策略(下)
- Redis 数据结构与内存管理策略(上)
- Servlet第三篇【request和response简介、response的常见应用】
- Java 10的10个新特性,将彻底改变你写代码的方式!
- JDK9新特性实战:简化流关闭新姿势。
- Druid数据库连接池就是这么简单
- 使用 github 做代码管理,知道这些就够了
- 二叉树就这么简单
- Elasticsearch就是这么简单
- 让 MyBatis Generator 变的更简单
- SpringMVC【参数绑定、数据回显、文件上传】
- SDNLAB技术分享(五):浅谈Open vSwitch移植
- SpringMVC【校验器、统一处理异常、RESTful、拦截器】
- OpenStack与SDN控制器的集成
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- NIO从入门到踹门
- GitHub CLI 1.0.0 正式发布!
- 【Flink】从零搭建实时数据分析系统
- Android模拟面试,解锁大厂——从Activity创建到View呈现中间发生了什么?
- 问你一个简单的问题:IP是怎么来的,又是怎么没的?
- 进击的NIO!Reactor模式!
- 交换机与VLAN:以办公室为例趣讲一波!
- 超详细Netty入门,看这篇就够了!
- Netty进阶之粘包和拆包问题
- 用侦察兵的故事趣讲ICMP和Ping,看完想忘都难!
- Kubernetes 使用 ceph-csi 消费 RBD 作为持久化存储
- ZooKeeper入门,看这篇就够了
- 超详细的RabbitMQ入门
- 用向量做Mantel的几个问题
- Eclipse集成Maven打包时报错:[ERROR] Unknown lifecycle phase "mvn". You must specify a valid lifecycle phase