CSS Flex –动画教程

如果一张图片胜过千言万语 —— 那么动画呢? Flex 无法通过文字或静态图像有效地完全解释。为了巩固你对flex的了解,我制作了这些动画演示。

2.gif

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

为了获得更好的想法,你可以在这个页面上去尝试一下 Flex Layout Editor

默认 flex不会包装你的内容。它的工作原理很像 overflow: hidden

可能你在学习 flex 时第一个接触到的就是 flex-wrap

Flex Wrap

让我们添加 flex-wrap:wrap 来看看它是如何改变 flex 项的行为的。

基本上,它只会扩展容器高度并将物品包裹起来。

注意:即便是未指定容器得高度(auto/unset)仍然会这样。

3.gif
wrap

如果你有一些内容大小未知且数量也未知的项目,并且希望在屏幕上全部显示它们时,这是一种常见模式。

可以用 flex-direction: row-reverse 来反转项目的实际顺序。

4.gif
row-reverse

这可以用于需要从右到左的顺序阅读的内容。

你可以 “float:right所有flex-end 在同一行上的项目。

这与 row-reverse 不同,因为它保留了项目的顺序。

Justify Content

justify-content 属性负责 flex 项目的水平对齐

它看起来很像前面的例子……除了项目的顺序。

5.gif
flex-end

在以下示例中(justify-content: center),所有项目将自然地聚集到父容器的中心 —— 无论其宽度怎样。它与 position: relative; margin: auto 相似。

6.gif
center

Space between 意味着所有 内部 项目之间有空格:

7.gif
space-between

下面这个似乎与上面的完全相同。那是因为它的内容同样是整个字母表。如果用较少的弹性项目,效果会更明显。它们的不同之处是处于角落的项目的外边距

使用 space-between 属性(上图)处于角落的项目没有外边距

使用 space-around 属性(下图)所有项目的边距相同

8.gif
space-around

下面这个动画是相同的例子,只不过 middle 元素更宽一些。

9.gif
space-around

尽管你在前面看到了这些演示,但你仍然需要在自己的环境中去尝试 flex,这样才能是你真正理解布局。这也是我决定制作本教程的原因。这些动画受限于项目大小。你尝试的结果可能会因内容的具体情况而异。

对齐内容

上面的所有例子都涉及 justify-content 属性。不过即便涉及到自动折行,你也可以在 flex 中进行垂直对齐

属性 justify-content(上面的所有示例)和 align-content(下面)采用完全相同的值。它们仅在两个不同的方向上对齐 —— 相对于存储在柔性容器中的项目的垂直和水平方向上。

接下来探讨 flex 如何处理垂直对齐:

10.gif
align-content:space-evenly

关于 space-evenly 的一些现象:

  • Flex 自动分配足够的垂直空间
  • 项目行与相等的垂直边距空间对齐。

当然,你仍然可以修改父级的高度,并且所有内容仍然可以正确对齐。

实际应用中的情况

在实际布局中,你不会有一长串的文字,你将会使用一些独特的内容元素。到目前为止我只简单演示了动画中的 flex 是如何工作的。

当涉及到实际布局时,你可能希望对较少同时更大的项目使用 flex。就像真正网站上的那些内容一样。

我们来看几个想法……

均匀排列

对于 align-contentjustify-content 使用 space-evenly 会对具有5个正方形的一组项目产生以下影响:

11.gif
奇数项目的效果不是很好

当涉及 flex 的开箱即用的响应区域时,首先要确保尽可能使项目的宽度保持相同。

请注意,因为此示例中的项目数为 奇数个(5),所以这种情况不会产生你想要的那种理想的响应效果。使用偶数数字可以解决这个微妙的问题。

现在,考虑将相同的 flex 属性用在偶数个项目上:

12.gif
以更自然的方式响应偶数个项目

使用偶数个项目,你可以实现更清晰的响应式缩放,而无需用 CSS GridJavaScript magic

十多年来,在布局设计中垂直居中的项目已成为一个巨大的问题。

最后用 flex 解决了。 (呃……你也可以用 css grid 来解决。)

但是在 flex 中,在两个维度中使用 space-evenly 值会对内容自动调整,即使项目的高度可变:

13.gif
完美的对多个不同高度的项目垂直对齐

以上是对未来10年最常用的响应式 flex 的描述(开个玩笑!!)。

如果你正在学习flex,你会发现这通常是最有用的一组 flex 属性。

最后,下面的动画演示了所有可能会用到的值:

flex-direction: row; justify-content: [value];

14.gif

flex-direction: column; justify-content: [value];

15.gif


我建议你在 CSS grid 中使用这些类型的 flex 项目。 (你用的越多就会越明白 grid + flex。)不过使用 flex-only 布局也没有任何问题。

要明确指定元素的大小

如果不这样做,一些 flex 缩放将无法正常工作。

相应地使用 min-widthmax-widthwidth / height

这些属性可以对整个 flex 可伸缩性产生影响。

以上!希望你能够喜欢这篇文章。

英文原文地址:https://www.freecodecamp.org/news/the-complete-flex-animated-tutorial/

为了保证的可读性,本文采用意译而非直译。

Image placeholder
前端答疑
未设置
  99人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css3中过渡和动画的区别是什么?

transition过渡让css变化平滑一些属性:属性描述transtion-property指定过渡的属性transtion-duration指定过渡所需时间transtion-timing-fun

CSS动画笔记

元素内容水平垂直居中padding:10pxoverflow设置水平和垂直方向的溢出显示父元素感知子元素存在:overflow父元素浮动z-index定位元素Z轴距离绝对定位:其他元素为参照物不会占用

CSS动画笔记-前缀

很多CSS4已经可以使用了,需要定义前缀,每个浏览器中的内容是不一样的。厂商前缀。 内核:Geckofirefox-moz-Webkitchrome-webkit-TridentIE-ms-Prest

css flex布局的优缺点是什么?

Flexbox布局(FlexibleBox)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局(基于一维),即使他们的大小是未知或者是动态的。(这里我们称为Flex)。Flex布局主要

【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

iOS 核心动画高级技巧 - 1

1.图层树图层的树状结构 巨妖有图层,洋葱也有图层,你有吗?我们都有图层--史莱克 CoreAnimation其实是一个令人误解的命名。你可能认为它只是用来做动画的,但实际上它是从一个叫做LayerK

Adobe又逆天!不用机器学习,用13.5M软件把《长安十二时辰》变成水墨动画

大数据文摘出品作者:曹培信用过修图软件的同学们应该都知道,利用强大的GAN,已经可以实现一键转换照片风格的功能,比如将你拍的风景照转换成一副印象派的画作。现在,轻松转换视频风格的软件也诞生了!Secr

不一样的css,sass(scss)的基本使用

前言此文主要记录sass的scss语法的基本使用。sass是css的预编译器,它扩展一些css所没有的变量的定义、条件控制、循环、自定义方法等。基础内容1.变量/*scss*/ //声明变量 $pri

基于JS的高性能Flutter动态化框架MXFlutter

导语:18年10月份,手机QQ看点团队尝试使用Flutter,做为iOS开发,一接触到Flutter就马上感受到,Flutter虽然强大,但不能像RN一样动态化是阻碍我们使用她的唯一障碍了。看Goog

Flutter路由项目实战之fluro

github:https://github.com/zhengzhuan...关于flutter路由,在小项目中,就按照原生写法,但是在大型项目中,这样的我就不会进行推荐,我这里使用的fluro路由管

前端不得不了解的 Flex 布局

背景 又双叒叕被老大拉来顶替前端小姐姐撸代码,接触到了Flex布局,以前只听过没用过,碰巧这次要揭露她的面纱,就记录一下。接触前端的同学都应该知道网页布局是CSS的一个重点,布局的传统方案都是基于盒

前端不得不了解的 Flex 布局

背景 又双叒叕被老大拉来顶替前端小姐姐撸代码,接触到了Flex布局,以前只听过没用过,碰巧这次要揭露她的面纱,就记录一下。接触前端的同学都应该知道网页布局是CSS的一个重点,布局的传统方案都是基于盒

css使用float怎么居中?

css使用float怎么居中?css并没有float:center,但是实现水平居中浮动是可以实现的。以下面的Li列表为例,我们要实现中间LI的居中浮动: 列表一 列表二 列表三 我们需要先了解下

css3.0和css2.0区别?

css3.0和css2.0区别?css3加强了css2的功能,增加了新的属性和新的标签,并且删除了一些冗余的标签,在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了(columns之类的属

css1和css2的区别是什么?

css1和css2的区别是什么?CSS1提供有关字体、颜色、位置和文本属性的基本信息,该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。CSS2.0提供给我们了一个机制,让开发时可以不考虑显

Stack Overflow 上最火的一个问题:什么是 NullPointerException

在逛StackOverflow的时候,发现最火的问题竟然是:什么是NullPointerException(java.lang.NullPointerException),它是由什么原因导致的,有没有

你不知道的 CSS : Next-generation web styling

最近看了ChromeDevSummit2019大会视频,了解到了很多之前不知道的CSS新特性,挺有意思的。下面我就介绍几个激动人心的特性。特性总览:StickyStickeyStackSticySli

css text不换行怎么办

csstext不换行怎么办css强制换行需要设置word-wrap属性和word-break属性,具体设置如下:div{ word-wrap:break-word; word-break:break-

css设置span标签里text-indent不起作用?

css设置span标签里text-indent不起作用?span标签的text-indent不起作用是因为text-indent只能给块级元素设置,而span标签是行内元素。解决方法是设置span标签

dw cs6怎么保存为css格式

dwcs6怎么保存为css格式1、首先,打开DreamweaverCS6,新建一个css文档,选中“css”,点击确定按钮。2、将设计好的css样式放入该页面,@charset"utf-8";用来指定

wordpress无法加载css

wordpress无法加载css出现这种情况是因为wordpress安装时用http://localhost访问来安装,局域网访问时,加载css的路径不对,所以会出现css无法加载,只显示文字。解决方

scss和sass的区别是什么?

另外,SCSS还能识别大部分CSShacks(一些CSS小技巧)和特定于浏览器的语法,例如:古老的IEfilter语法。由于SCSS是CSS的扩展,因此,所有在CSS中正常工作的代码也能在SCSS中正

css什么时候用class和id?

css什么时候用class和id?当css样式用于不止一个元素时,使用class来定义。当css样式只应用于一个元素时,使用id来定义。例如导航条,每个页面中,只存在一个顶部导航条的话,可以使用id来

Scss与Sass是什么?

之间的区别是什么?下面本篇文章就来给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。Sass是什么?Sass是一门高于CSS的元语言,它能用来清晰地、结构化地描述文件样式

sass与scss的区别是什么?

Sass是采用Ruby语言编写的一款CSS预处理语言,它诞生于2007年,是最大的成熟的CSS预处理语言。最初它是为了配合HAML(一种缩进式HTML预编译器)而设计的,因此有着和HTML一样的缩进式