专栏首页图雀社区CSS Flexbox 布局完全指南 (二):3000字,多示例讲解

CSS Flexbox 布局完全指南 (二):3000字,多示例讲解

Photo by Igor Miske on Unsplash

理解 Flexbox 最好的方式是什么?学好基础,再大量练习。这正是我们要在这篇文章中做的事情。

在《CSS Flexbox 布局完全指南 Part 1(含示例)》中,我们介绍了如何用 Flexbox 制作一个影片集,如何通过 Flexbox 布局卡片,如何使用 Flexbox 创建网格布局。现在我们继续介绍更多示例。

示例四:如何使用 Flexbox 构建网站布局

社区的伙伴们通常不建议整个网站布局都使用 Flexbox。

虽然我赞同这个观点,但是我也认为在特定的情况下你可以不用考虑这么多。

我能给到最重要的一点建议是:在你需要的时候使用 Flexbox 布局。

我会在下面的例子中解释这点。

圣杯布局

“圣杯布局”是经典的布局方式。

圣杯布局:头部,页脚和 3 个其他容器

有两种 Flexbox 方式可以实现这种布局。

第一种是用 Flexbox 来实现布局。把 headerfooternavarticleaside 都放在一个 flex-container 容器里。

我们开始吧。

标识语言

看一下下面这个基本的标识文本:

<body>  <header>Header</header>  <main>    <article>Article</article>    <nav>Nav</nav>    <aside>Aside</aside>  </main>  <footer>Footer</footer></body>

圣杯布局遵循了一条特殊的规则:

中间的那列 article 应该在 navaside 两个侧边栏之前显示出来。

<article></article> 居中布局且先显示在页面上

建立一个 Flexbox 格式文本

body {   display: flex}

因为子元素应该从顶部到底部布局,所以我们要改变 Flexbox 的默认方向。

body { ... flex-direction: column}

- headerfooter 要有固定的宽度

header,footer {  width: 20vh /*you can use pixels e.g. 200px*/}

- main 要填满 flex-container 中剩下的部分

main {   flex: 1}

你一定没忘记,flex: 1 表示 flex-grow: 1flex-shrink: 1flex-basis: 0

这可以让 main “变大”填满剩下的可用空间

此刻,我们要开始考虑 main 中的 articlenavaside 三个部分。

main 设成一个 flex-container

main {  display: flex}

navaside 设置固定的宽度:

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-itemorder 值最小的会排列在最前面。

所有的 flex-items 元素默认 order 值都是 0

圣杯布局(另一种布局方式)

之前的方式是把 flex-container 作为一个整体的容器,这个布局非常依赖 Flexbox。

我们来了解一种更为适合的方法。首先再来看下最终要达到的效果:

圣杯布局

headerfooter 可以被当作块状元素。在没有任何干预的情况下,它们会在从顶部到底部,填满父级元素。

<body>  <header>Header</header>  <main>    <article>Article</article>    <nav>Nav</nav>    <aside>Aside</aside>  </main>  <footer>Footer</footer></body>

使用这种方法,唯一需要作为 flex-container 的就是 main 元素。

使用这个方法有个缺点就是你要自己计算 main 的高度。main 应该填满除 headerfooter 外的空间。

main {  height: calc(100vh - 40vh);}

上面的代码块使用 CSS 中的 calc 来计算 main 的高度。

不管怎样,main 的高度都要等于 calc(100vh — height of header — height of footer)

在之前的解决方案中,headerfooter 都有一个固定的高度,接下来再通过同样的方法计算 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-bodymedia-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

第六步

最后,像之前的例子一样,把每个块状元素当成一个媒体对象。

把内容块当成媒体对象

按照上面的六个步骤,你就可以成功创建一个手机应用布局。

本文分享自微信公众号 - 图雀社区(tuture-dev)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一杯茶的时间,上手 Taro 京东小程序开发

    小程序世界纷争不断,巨型 App 都在纷纷构建自己的小程序流量入口,希望在造福商家、用户的同时,也能巩固自家流量壁垒,我们已经熟知了微信小程序、支付宝小程序,我...

    一只图雀
  • uni-app 结合云函数开发小程序博客(二):云函数实现登录注册

    不好意思大家,个人原因拖了一周时间才发表第二篇,没想到还有朋友在支持,非常感谢和抱歉。第一篇中已经引入了第三方样式,实现了主题和语言的切换;本篇主要开始页面的搭...

    一只图雀
  • uni-app 结合云函数开发小程序博客(三):接入云函数,实现完善的列表刷新机制

    因为项目做的是博客demo, 首页进来想给人直观的就能看到文章,看到分类。所以想的一个是可以左右滑动,切换分类,一个是页面以列表形式,直接 list 渲染。类似...

    一只图雀
  • Django的主体页面抽取(七)

    在潦草的完成了注册与登录之后,下面开始编写平台的主体部分了。 忘记密码和恢复密码部分在最后完善的时候补上。

    zx钟
  • Spring入门

    框架:在这里特指软件框架,它是我们在实际开发中解决项目需求的技术集合。运用框架可以大大简化我们的代码编写,缩短开发周期。同时,对后续项目维护在面对开发团队人员更...

    用户7589824
  • (六)-class文件结构1 什么是JVM的“无关性”?2 纵观Class文件结构

    JavaEdge
  • 单元测试-mock使用应该注意什么

    Mock的概念,其实很简单:所谓的mock就是创建一个类的虚假的对象,在测试环境中,用来替换掉真实的对象,以达到两大目的:

    洋仔聊编程
  • Python测试开发-创建模态框及保存数据

    模态框是指的在覆盖在父窗体上的子窗体。可用来做交互,我们经常会看到模态框用来登录、确定等等,到底是怎么实现这种弹出效果,bootstrap已经为我们提供了相...

    测试开发社区
  • Web开发---单页面应用(签到日报--技术实现)

    疫情前期,员工分布在各个地区,需要上报个人的健康状态和位置信息,于是做了一个单页面应用(当时钉钉和微信上的健康上报模板还没出现)

    MiaoGIS
  • iOS底层原理总结 - 探寻Class的本质

    xx_Cc

扫码关注云+社区

领取腾讯云代金券