为了开发与大屏幕尺寸一致的小屏幕设计

RAHIM26

在水平滚动的图形元素内交替旋转图像。由于浏览器默认将 Flex 容器设置为不换行并沿水平轴排列其 Flex 项目，因此我只需要应用 display: flex; 到我的图形元素： figure  复制 通过确保我的图形永远不会超过我的视口的宽度并将水平溢出设置为滚动，我开发了一个简单的滚动面板，它可以包含我需要的尽可能多的图像： 复制 我的图形元素包含四个 SVG 图像。为了在使用 Flexbox 时保持它们的长宽比，我将每个都放在自己的分区中</figure> 复制 为了用图像填充所有水平空间，我使用了 flex-grow 属性。flex-grow 控制元素扩展以占据容器中可用空间的比例则相反。此属性指定当容器比其组合宽度窄时元素尺寸减小的比率。我希望我的弹性项目能够增长以填充任何可用空间，但不缩小 复制 在一天之内准备好数据网格从未如此简单。


尝试我们的网格 都允许元素的宽度完全流动，对它们的宽度或窄度 美国手机号码列表 没有限制。有时，弹性项目在增大或缩小之前应以特定尺寸开始。在 Flexbox 中，flex-basis 为元素在弯曲之前提供了一个起始宽度： figure div { flex-basis: 40%; /* flex: 1 0 40%; */ } 复制 为了从样式表中节省一些字节，我可以使用 flex 简写将这三个属性合并为一个。 在 Flexbox 和 Grid 之间进行选择 # 人们经常问我何时使用 Flexbox 或 Grid。当然，我的答案取决于他们正在实现的元素的样式。对于我的四幅图形图像集，我可以使用 Flexbox 或 Grid 开发 2x2 排列，其中每个图像都显示相同的大小。但是，当我添加或删除图像时，使用 Flexbox 得到的结果并不是我想要的，因为最终图像会扩展以填充图形的整个宽度。通过将 Flexbox 更改为 Grid，每个项目都会与保持其大小的网格对齐。 左：使用 Flexbox，每个项目都会扩展以填充可用空间，因此最终项目的大小是其他项目的两倍。右：使用网格，元素与我的网格保持对齐，从而保持相同的大小。



（大预览） 在印刷品中，经常会看到设计元素重叠以产生深度错觉。在网络上，实现这种效果非常棘手，因此设计元素大多保持独立。网格使过去很难甚至不可能实现的设计成为可能。 当屏幕足够大，可以并排渲染主要元素和图形元素时，我会应用 display: grid; 到主体元素的列宽与 6+4 复合网格相匹配，我在第 2 期中向您展示了。我还设置了列和行之间的间隙： 复制 我将我的物品与网格容器的末端对齐，然后轻推并旋转我的图像，使它们呈现出布罗多维奇启发的分散外观 复制 人们告诉我，像这样的设计适合编辑设计，但不适用于推广或销售它们的产品或网站。事实并非如此。平面设计原则对于数字媒体和印刷媒体同样重要。无论您选择哪种媒介，多样化且有趣的设计都会脱颖而出。 我使用分散的图片将新型电动 Vespa 踏板车的设计变为现实。（作者的再创作。）（大预览） 阿列克谢·布罗多维奇本能地知道如何将照片与书面内容结合起来，经常将文本变成与他的摄影形式形成对比或反映的形状。