您好,本文属于技术类文章。建议有这方面技术基础的人阅读一下,以便更好的理解。
本文分两步解释,如下所示:
第一步:什么是flex+p?
弯曲是CSS的一套布局方案,一个一维布局模型;是Flexible Box的缩写,意思就算“弹性布局”,理解flex概念使用,记住下面两点即可:flex布局的两个轴:X轴和Y轴(有些会叫主轴和横轴,横线和竖线,我喜欢用X和Y来更简洁的描述)。Flex容器和flex子元素(任何元素标签都可以设置为flex容器,由设置的flex容器包装的子元素就是flex子元素)。p其就是一个普通HTML元素标签,大部分内容都是可以基于这个元素标签封装的,形成一个复用性大,共用性好的新元素标签。第二步:如何使用flex+p绘制作品,作品的哪些场景可以使用?首先,如何使用,我们直接看一个打包好的示例元素标签,拆开来说明如何使用,举一反三:图-1-1这是货架上常见的商品卡片的信息内容,用flex+p结构绘制,用红圈显示,都是flex+p内容布局。外层定义flex容器,内部是flex容器的子元素内容。这些子元素是灵活的。因此,大多数页面内容都可以使用这种flex+p方法来封装业务标签组件,以便重用。flex布局元素排列得很好,设置了每个元素的内外边距、样式、字体、颜色等标签属性,所以可以看到这样一个通用组件的通用标签场景。简单!这是一张互联网作品的flex+p图,货架上的商品卡,一批再利用形成列表展示。
以下代码标签由flex+p为本产品绘制。只有确定了页面内容的flex结构层次,才能快速绘制出来:图-1-2
会用到哪些场景?网站、小程序、管理系统等互联网作品基本都会用到。根据业务需求场景打包您的工作输出服务。简单!学习flex+p,在绘制你的互联网产品的道路上,快速便捷实战成为可能,无论是自由创作原创作品还是复制图片。你的想象力是无限的空。就像我们画家一样,可以自由创作作品,也可以看图看景创作作品。实际工作是沟通场景需求。只有当你在创造的时候,你才能满足客户的需求和意图,这样你才能走得更好。
拜拜。下次见!