通过动图学习 CSS Flex [每日前端夜话0x7C]
尽管你在前面看到了这些演示,但你仍然需要在自己的环境中去尝试 flex,这样才能是你真正理解布局。这也是我决定制作本教程的原因。这些动画受限于项目大小。你尝试的结果可能会因内容的具体情况而异。
对齐内容
上面的所有例子都涉及 justify-content 属性。不过即便涉及到 自动折行 ,你也可以在 flex 中进行 垂直对齐 。
属性 justify-content (上面的所有示例)和 align-content (下面)采用完全相同的值。它们仅在两个不同的方向上对齐 —— 相对于存储在柔性容器中的项目 的垂直和水平方向上。
接下来探讨 flex 如何处理 垂直对齐:
关于 space-evenly 的一些现象:
-
Flex 自动分配足够的垂直空间 。
-
项目行与相等的垂直边距空间对齐。
当然,你仍然可以修改父级的高度,并且所有内容仍然可以正确对齐。
实际应用中的情况
在实际布局中,你不会有一长串的文字,你将会使用一些独特的内容元素。到目前为止我只简单演示了动画中的 flex 是如何工作的。
当涉及到实际布局时,你可能希望对较少同时更大的项目使用 flex。就像真正网站上的那些内容一样。
我们来看几个想法……
均匀排列
对于 align-content 和 justify-content 使用 space-evenly 会对具有5个正方形的一组项目产生以下影响:
当涉及 flex 的 开箱即用的响应 区域时,首先要确保尽可能使项目的宽度保持相同。
请注意,因为此示例中的项目数为 奇数个 (5),所以这种情况不会产生你想要的那种 理想的 响应效果。使用 偶数 数字可以解决这个微妙的问题。
现在,考虑将相同的 flex 属性用在 偶数 个项目上:
使用 偶数 个项目,你可以实现更清晰的 响应式 缩放,而无需用 CSS Grid 或 JavaScript magic 。
十多年来,在布局设计中垂直居中的项目已成为一个巨大的问题。
最后用 flex 解决了。 ( 呃……你也可以用 css grid 来解决 。)
但是在 flex 中,在两个维度中使用 space-evenly 值会对内容自动调整, 即使项目的高度可变:
以上是对未来10年最常用的响应式 flex 的描述(开个玩笑:laughing:)。
如果你正在学习flex,你会发现这通常是最有用的一组 flex 属性。
最后,下面的动画演示了所有可能会用到的值:
flex-direction: row; justify-content: [value];
flex-direction: column; justify-content: [value];
我建议你在 CSS grid 中使用这些类型的 flex 项目。 (你用的越多就会越明白 grid + flex 。)不过使用 flex-only 布局也没有任何问题。
要明确指定元素的大小
如果不这样做,一些 flex 缩放将无法正常工作。
相应地使用 min-width , max-width 和 width / height 。
这些属性可以对整个 flex 可伸缩性产生影响。
以上!希望你能够喜欢这篇文章。
原文:https://www.freecodecamp.org/news/the-complete-flex-animated-tutorial/
推荐图书
下面夹杂一些私货:也许你和高薪之间只差这一张图
2019年京程一灯课程体系上新,这是我们第一次将全部课程列表对外开放。
愿你有个好前程,愿你月薪30K。我们是认真的 !
在公众号内回复“体系”查看高清大图
长按二维码,加大鹏老师微信好友
拉你加入前端技术交流群
唠一唠怎样才能拿高薪
往期精选
小手一抖,资料全有。长按二维码关注 前端先锋 ,阅读更多技术文章和业界动态。