专栏首页京程一灯通过动图学习 CSS Flex [每日前端夜话0x7C]

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

CSS Flex – Animated Tutorial

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

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

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

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

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

Flex Wrap

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

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

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

wrap

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

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

row-reverse

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

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

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

Justify Content

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

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

flex-end

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

center

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

space-between

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

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

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

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

space-around

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

对齐内容

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

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

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

align-content:space-evenly

关于 space-evenly 的一些现象:

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

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

实际应用中的情况

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

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

我们来看几个想法……

均匀排列

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

奇数项目的效果不是很好

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

要明确指定元素的大小

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

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

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

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

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

推荐图书

下面夹杂一些私货:也许你和高薪之间只差这一张图

2019年京程一灯课程体系上新,这是我们第一次将全部课程列表对外开放。

愿你有个好前程,愿你月薪30K。我们是认真的 !

本文分享自微信公众号 - 前端先锋(jingchengyideng),作者:疯狂的技术宅

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

原始发表时间:2019-06-02

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

我来说两句

0 条评论
登录 后参与评论

相关文章

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

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

    疯狂的技术宅
  • 如何使用SVG动画来制作游戏

    在使用过一段时间的SVG动画之后,我相当清楚如何利用它来制作动画片段或者网页布局。一些动画库平台,例如Greensock,和原生的CSS动画简直是绝配。于是我便...

    疯狂的技术宅
  • React-Native入门指南(三)

    在不断深入的过程中,发现React-Native布局和样式的坑还有很多,他没有像浏览器那样灵活和有规律可循,其中的规律需要我自己踩坑的时候发现。比如:不存在zI...

    疯狂的技术宅
  • CSS6:flex布局

    display inline-block主要用来做横向的布局。 用分离负maigin用来产生位移。

    代码之风
  • Vue.js学习笔记(5)

    容器默认两个轴 main axis:水平主轴 cross axis:垂直交叉轴

    程序员不务正业
  • 弹性(Flex)布局的使用

    最近我参与实施的两个项目中,一个页面交互复杂,而另一个相对传统,两个项目相比之下凸显出了页面布局样式的时间占比不可忽视,使用了弹性布局代码量精简了不少。

    嘉为科技
  • 【Taro】363- 玩转 Taro 跨端之 flex 布局篇

    Taro 是一套遵循 React 语法规范的跨平台开发解决方案,但是目前当我们使用 Taro 的时候,在不同平台上的开发体验还有不一致的地方,所以我们也都期待有...

    pingan8787
  • CSS:10分钟搞定Flex布局

    Flexbox Layout(弹性盒子布局),是CSS3的一种新型布局模式,给很多CSS老大难问题提供了优雅的解决方案(例如:垂直居中

    WEBJ2EE
  • flex布局 原

    Flex是Flexible Box的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性。在处理垂直方向的对齐比较方便,现在越来越多的浏览器已经支持flex布局,...

    tianyawhl
  • 深入 CSS 中的弹性盒子 Flexible Box

    弹性布局是指通过调整其内元素的宽高,从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间,或将其收缩来避免溢出。

    IT技术小咖

扫码关注云+社区

领取腾讯云代金券