vux flexbox使用
如果您想学习CSS Flexbox，我敢打赌，您已经花了一些时间在YouTube上观看了一些教程。 也许您已经看过Wes Bos系列 ，这是一个很棒的系列 。 也许您是双语人士，并且以您的母语找到了一些有用的内容。 众所周知，互联网上的大多数技术内容都是英文。 但是，有时我会发现我的母语葡萄牙语令人惊讶的内容。 （就像在Flexbox上理解这个非常简单的教程一样） 。 最后，您怎能不求助于Interneting Hard教程 ？
但是，我见过的大多数教程都遇到了问题。 他们将教您如何仅使用...框来创建这些出色的响应式网格。 当然，这很好，因为响应式图像本身可以成为一个主题。 但是Flexbox网格通常是使用图像构建的。
即使我发现使用图像的教程，图像的大小也都相同。 如果可以处理大小相等的图像，那很好，但是并非总是如此。 即使是这种情况，我将要展示的这项技术也可能派上用场。
首先，让我们看一下如何构建没有图像的Flexbox网格：
记住我们的伸缩需要包装。
我们的flex容器应该看起来像这样。
现在，让我们尝试添加一些大小相等的图像：
我们可以使其响应速度更快，以百分比为单位。 像这样：
我添加了最大宽度并使用margin auto将内容居中。
不要忘记从两个边距中减去10px。 弯曲增长和收缩确保我们的图像尺寸始终按比例变化。
那也可以写成一行。
最后，让我们看看如果尝试添加不同大小的图像会发生什么：
如您所见，这看起来不太好。 那么，我们该如何解决呢？ 首先，重要的免责声明。 我将向您展示的解决方案是一种使用响应图像构建网页的快速方法。 响应式图像的主题可能很广泛。
通常涉及页面加载时间之类的事情。 这可能会影响您的SEO排名和用户体验。 如果您想更深入地研究该主题，那么我将在最后引用一些文章，但是，到目前为止，这是您的操作方法：
首先，计算高度最小的图像的纵横比。 您可以通过将高度除以宽度来做到这一点：
在浏览器中打开您的devtools
将鼠标悬停在图片上
我们最小的图像长宽比将为119.8％
然后，在图像周围添加包装器。
这很重要，因为您不希望图像容器成为Flex包装器。
您的图像包装程序将不会有高度，而是要确定是顶部填充还是底部填充。 顶部或底部的填充将采用我们刚刚计算的宽高比。
像这样：
图像包装的位置将是相对的，因为图像将是绝对的。 最后，您将图像的位置设置为绝对位置。 然后，将图像居中-边距：自动对于我们的示例来说是必需的。
第一行就是这样。 但是第二行的图像更小。 我们可以重新调整所有框的长宽比，也可以仅调整第二行上的框的长宽比。 由你决定。 我将选择第二种方法。
看一看：
瞧！
而已。 玩得开心！
资源：
我学到了我刚刚在这篇惊人的文章中展示的技巧。 作者称其为“ Netflix之路”：
如果您想扩展响应式图像的主题，以下文章将非常有用：
翻译自: https://hackernoon.com/how-to-create-truly-responsive-images-with-flexbox-2z4f3yjj
vux flexbox使用
扫一扫
499
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
