专栏首页京程一灯CSS Flexbox 可视化手册 [每日前端夜话(0x1E)]

CSS Flexbox 可视化手册 [每日前端夜话(0x1E)]

每日前端夜话0x1E

每日前端夜话,陪你聊前端。

每天晚上18:00准时推送。

正文共:6879 字

预计阅读时间: 16 分钟

翻译:疯狂的技术宅 原文:https://medium.com/swlh/css-flexbox-fundamentals-visual-guide-1c467f480dac

目录

介绍弹性项目 弹性容器 弹性方向 Flex Wrap 弹性流 项目之间的缝隙 排序 对齐 justify-content align-items align-content align-self 调整 Flexbox 的大小 flex-grow flex-shrink flex-basis flex Autoprefixer 参考

介绍

Flexbox是 Flexible Box Module(弹性盒模型)的缩写。 是一种可以轻松控制html元素之间的空间分布和对齐的布局模型。

Flexbox同一时间只能控制行或列中的一个维度。对于二维控制需要 CSS 网格布局。

首先给出如下模板:

以上 div 的默认行为遵循普通的html文档流,将会从上到下、从左到右呈现,并采用整个 body 的宽度,因为其 display属性默认为block

弹性项目

display: flex应用于 .containerdiv 时,所有直接子div都变为 flex-items,并获得新的行为

  • 它们将显示在同一行中,因为flex-direction默认为row
  • 它们将会从左到右显示
  • 其中的项目不会自动伸展来适应整个宽度(主轴),为了做到这一点,它们会缩小。
  • 项目会被拉伸以适合交叉轴(在此示例中为高度)。 如果这些项目的高度不一致,它们将会伸展到最高的那个高度
  • flex-basis默认为 auto(项目宽度将由其内容决定)
  • flex-wrap默认为nowrap(如果容器的宽度不足以适合这些项目,它们不会换行,而是会溢出)

出于可视化的目的,让我们拉伸容器使其占据整个高度。

弹性容器

display:flex使容器扩展至整个可用宽度。 这点与 display:inline-flex相反,它使容器缩小到内容的宽度。

弹性方向

一旦被声明为 flex 容器,就可以认为该元素具有两个轴:主轴与交叉轴。 主轴由flex-direction属性定义。 交叉轴垂直于前者。

flex-direction属性有四个值:rowrow-reversecolumncolumn-reverse

其默认值为row,它从左到右水平设置主轴,交叉轴从上到下垂直截取。 类似地, column值从顶部到底部垂直设置主轴,从左到右设置交叉轴。 这两个选项的相反属性使主轴反转180°。 交叉轴保持不变。

可以通过下图观察这些值的 flex-items 行为:

Flex Wrap

当容器中的空间不足以容纳其中的弹性项目时,可以用 flex-wrap来处理。

在默认情况下,flex-wrap被设置为 nowrap,这意味着如果容器不能适应在其内的行中原始宽度的项目,则这些项目将会缩小来进行适应。 如果它们因为某种原因无法收缩,则会溢出容器。

把项目宽度设置为300px,nowrap选项会输出以下结果:

其中,每个项目都会缩小到大约 70px 来适合容器。

当属性被更新为wrap时,现在项目的宽度实际上是原始值300px。 当第一行不足以容纳300px时,则该项目将换行到新的一行,而不是溢出容器。 应该把其中的每一行都视为单独的弹性容器。 一个容器中的空间分布不会影响到与其相邻的其他容器。

但是为什么弹性项目会占据整个屏幕高度呢? 在第一部分中,容器高度设置为 100vh,因此可用空间被平均分为四行,来适合 300px项目的需要。 如果我们没有设置 100vh,容器的高度则会遵循项目内容的高度,如下图所示:

没有设置容器高度

另一个选项是wrap-reverse,它会反转交叉轴。 通过 flex-direction属性从上到下设置,wrap-reverse将其转换为从下到上。

Flex Wrap — Wrap Reverse

通过使用 flex-direction:column反转主轴,不适应的元素会被换到另一列,剩余空间被均匀分割。

wrap-reverse选项会沿着列方向将交叉轴从右向左反转,产生以下输出:

由于flexbox是单维度布局,所以在进行反转时,项目从下到上进行排列(对于行方向),但保持左右结构,只改变了交叉轴。

弹性流

flex-directionflex-wrap可以在一个属性当中声明:flex-flow:[direction][wrap]

项目之间的缝隙

让我们回到row/wrap。 可以通过设置项目的 width:33.3333%来填充整个容器:

但是如果你希望在子div 之间有一个间隙,它们就不会按照你想的那样换行:

这个小麻烦这可以通过 CSS 函数 calc()来解决:

为了消除容器边缘的空间,可以在容器上使用负边距:

排序

order属性允许更改出现的可视排序项目。排序被分配给组。 默认情况下所有的弹性项目都设置为 order: 0,这意味着所有项目都属于同一组,并且它们将按照原始顺序定位。 在两个或多个组的情况下,组会相对于它们的整数值进行排序。

在下面的例子中,有三个 ordinal groups-1, 01,按此顺序进行排列。

此属性可视地重新分配项目,但在交互时保持其原始源位置,例如使用Tab键遍历它们。 如果物品订购对可访问性有影响,则可以考虑这一点。 flex-direction也是如此。

对齐

在Flexbox中,沿着轴的项目对齐和空间分布可以受到四个属性的控制:

  • justify-content: 对齐主轴中的所有项目
  • align-items: 对齐交叉轴中的所有项目
  • align-self: 对齐交叉轴中的单个项目
  • align-content: 控制交叉轴上柔性线之间的空间

justify-content

适用于容器,justify-content处理项目在主轴上的对齐方式。六个最常用的选项包括: flex-startflex-endcenterspace-aroundspace-betweenspace-evenlyflex-start是默认值。.

align-items

也适用于容器, align-items属性处理交叉轴方向上的对齐。它的默认值是 stretch其它的选项是 flex-startflex-endcenterbaseline

stretch选项使所有项目伸展到容器高度(如果设置)或最高项目的高度。 第一张图片显示容器高度设置为 100vh,未设置第二个高度。

align-content

这是作用在 flex 容器的四个属性中的最后一个,align-content在交叉轴中的弹性线之间分配空格。 作为后者,它的初始值是 stretchjustify-content,它接受以下选项: flex-start, flex-end, center, space-around, space-between, space-evenly

align-self

align-items 属性实际上通过在容器内的所有 flex 项目上设置 align-self 来实现。 通过单独设置 align-self,可以覆盖全局值。 它接受与align-items和'auto'相同的值。

auto选项通过 align-itemsalign-self重置为容器全局定义的值。

调整 Flexbox 的大小

项目的尺寸和伸展性可以通过三种属性来控制: flex-growflex-shrinkflex-basis。 这三个都作用于主轴。

  • flex-grow:如果有额外的空间,每个项目应该如何放大
  • flex-shrink:如果没有足够的空间,应该如何缩小每个项目
  • flex-basis:在设置上述两个属性之前,该项目的大小应该是多少

flex-grow

由此属性设置的 flex grow factor(弹性增长因子)用来处理项目大小相对于彼此的比率。

默认值为 0,这意味着如果还有可用空间,就把它放在最后一个项目之后。

在上面的例子中,direction被设置为 row,每个弹性项目的 width被设置为 60px。 由于容器宽是 980px,所以剩余的可用空间为 680px。 这个空间被称为positive free space(正自由空间)。

如果将 flex-grow设置为1,正可用空间量会在弹性项目之间平均分配。 每个项目的宽度将会增加 136px,总宽度为196px

通过将 flex-grow: 2应用到第三个项目,它会得到比其它项目多出两倍的可用正自由空间,即286px,其他项目仍为173px

下图显示了把项目的 flex-grow属性值设置为其内容对应的数字时的情形。

flex-shrink

当没有足够的可用空间来容纳所有容器时,用 flex-shrink处理项目大小。 它通过缩小这些项目来划分它们之间的 negative free space(负自由空间)。

下图显示的是宽度为 980px的容器,它容纳了5个宽度为 300px的物品。 由于没有空间容纳所需的总宽度 1500px,所以默认的flex shrink factor(弹性收缩系数)的值为1,这样会使每个项目的宽度均匀缩小到196px

通过将第三项的比率设置为2,它缩小为其余项目大小的二分之一。

本节的最后一张图显示了将每个项目的内容值对应的数字设定为 flex-shrink的值时的情形。

flex-basis

flex-basis是在实际设置可用空间之前,检查每个项目本来应具有的大小的属性。 默认值为 auto,项宽度由 width属性显式设置,或者取其内容宽度。 它也接受像素值。

下面的动图显示了一个800px宽的容器和五个设置为 flex-basis:160px的弹性项目。 这告诉浏览器:如果在理想状态下,有足够的空间来放置所有的项目,就遵循它们的160px宽度,并且没有正/负可用空间;如果没有足够的空间的话,那么 flex-shrink默认为1,所有项目均匀收缩; 如果有额外的空间,flex-grow默认为0,并且剩余的空间放在最后一个项目之后。

下一个动图展示了把项目1设置为flex-shrink:10,项目4设置为flex-grow:10。对于负自由空间,项目1的宽度减少10倍。 对于正空闲空间,第4项的宽度是其他空间的10倍。

flex-basis也接受值 content,此时无论其宽度是否被设置,计算自由空间时所考虑的宽度依据是项目中的内容。

flex

flex属性是按顺序排列的 flex-growflex-shrinkflex-basis的简写,它接受以下预定义值:

  • initial:重置为 flexbox 的默认值,等同于 flex: 0 1 auto
  • auto:flex-items能够根据需要增长/缩小,等同于 flex: 1 1 auto
  • none:固定项目,等同于 flex: 0 0 auto
  • flex: 1:flex-items 具有伸缩的能力,flex-basis设置为零,等同于 flex: 1 1 0

Autoprefixer

对于跨浏览器的兼容性问题,设置具有具有必要前缀的属性是非常重要的,以确保能够支持所有浏览器。

手动自动为每个属性添加前缀可能是一项非常繁琐的任务,也使样式很难维护。使用 Gulp能够替你自动执行这些任务。

为了能够使用Gulp,我们必须将它作为依赖添加到项目当中。 这项工作是在 package.json文件中完成的,它负责跟踪项目依赖及其版本。 在终端中输入下列命令来创建文件:

系统将提示你输入项目信息,可以一直按回车键直到完成。 输出的文件内容将是这样的:

全局安装gulp:

安装 gulp 和 gulp-autoprefixer 作为项目依赖项:

它们将会出现在 package.json文件中的 devDependencies下。

创建一个gulpfile.js文件:

添加以下内容:

gulp会从 styles.css中提取内容并通过 gulp-autoprefixer传递它。 处理结果会保存在build文件夹下。

参考

  1. What the Flexbox Course (https://flexbox.io/)
  2. Basic concepts of flexbox — 25/03/2018 (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
  3. Mastering Wrapping of Flex Items — 26/03/2018 (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items)
  4. Ordering Flex Items — 26/03/2018  (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items)
  5. Aligning Items in a Flex Container — 26/03/2018 (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container) 
  6. StackOverflow — 27/03/2018 (https://stackoverflow.com/questions/34606879/whats-the-difference-between-flex-start-and-baseline)
  7. Controlling Ratios of Flex Items Along the Main Axis — 28/03/2018 (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)
  8. Gulp (https://gulpjs.com/)
  9. Gulp Autoprefixer (https://www.npmjs.com/package/gulp-autoprefixer)

本文分享自微信公众号 - 京程一灯(jingchengyideng),作者:京程一灯

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

原始发表时间:2019-01-29

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 通过动图学习 CSS Flex [每日前端夜话0x7C]

    注意 overflow: hidden 行为类型是默认值,因为 flex-wrap 还未设置。

    疯狂的技术宅
  • JavaScript 类型的那些事

    JavaScript的类型判断是前端工程师们每天代码中必备的部分,每天肯定会写上个很多遍if (a === 'xxx')或if (typeof a === 'o...

    疯狂的技术宅
  • 尝鲜 ES2019 的新功能 [每日前端夜话0x38]

    ECMAScript 每年都会发布一个新版本,其中的提案是已经正式通过的,并分发给开发者和用户。本文将讨论该语言的最新版本,以及它又具有了什么新功能。

    疯狂的技术宅
  • Flex入坑指南

    弹性布局flex是一个几年前的CSS属性了,说它解放了一部分生产力不为过。至少解放了不少CSS布局相关的面试题 :) 之前网上流行的各种XX布局,什么posti...

    贾顺名
  • Flex弹性布局

    Leophen
  • 微信小程序-view元素Flex布局

    对于网页布局,推荐 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。可以参考完全教材,我推荐一个阮老师的,下面...

    叉叉敌
  • flexbox 伸缩布局

    row: 左-> 右 ,row-reverse: 右 -> 左 ,column:上 -> 下 ,column-reverse:下 -> 上

    frontoldman
  • flexbox基本原理

    新版的flexbox规范分两部分:一部分是container,一部分是 items。 flexbox是一整套布局规范,包含了多个css属性,所以学习起来比`fl...

    xiangzhihong
  • 快速学习-微信小程序开发(flex布局)

    https://www.w3.org/TR/css-flexbox-1/ https://www.w3.org/TR/css-align-3/

    cwl_java
  • flexbox布局指南

    伸缩容器是display的计算值为flex或inline-flex的元素,其流内孩子就是伸缩项(flex item)

    ayqy贾杰

扫码关注云+社区

领取腾讯云代金券