你好,本文属于技术类文章,建议有本领域的技术基础者阅读,以便更好地理解。
这篇文章分两个步骤讲解,如下:
第一步:什么是 flex + div 呢?
flex 是CSS的一套布局方案,一个一维布局模型;是Flexible Box的缩写,意思就算“弹性布局”,理解flex概念使用,记住下面两点即可:
- flex布局的两根轴线:x轴和y轴(有些会叫主轴与交叉轴、水平线与垂直线,我喜欢用x与y描述更简洁些)。
- flex容器和flex子元素(任何一元素标签都可以设置为flex容器,而被设置flex容器包裹在内的子元素,就是flex子元素)。
div 其就是一个普通HTML元素标签,大部分内容都是可以基于这个元素标签封装的,形成一个复用性大,共用性好的新元素标签。
第二步:如何使用 flex + div 来绘制作品,哪些场景的作品可以使用?
首先如何使用,下面我们直接看一个封装好的例子元素标签,给拆解出来讲解如何使用,其他举一反三即可:
这是一个普通货品上架的卡片信息内容,它就是一个flex+div结构绘制,被红线圈出来,都是一个个的flex+div内容布局,外层定义flex容器,内部就是该flex容器子元素内容,这些内容子元素,都flex布局排列x-y轴方向的信息,简单吧!所以几乎大部分的页面内容都可以使用这flex+div方式可以封装你的业务标签组件,以便复用,flex布局元素排列好,设置每个元素的内外边距、样式、字体、颜色这些标签属性,就看到这样一个通用的普通组件标签场景了。
简单吧!这就是一个flex+div绘制互联网作品,商品上架的货品卡片,多个就复用该标签组件形成一个列表展示了。
如下代码标签,就是这个货品使用flex + div方式绘制的,只有你确定了页面内容flex结构层级,即可快速绘制出来:
哪些场景会用到了,网站、小程序、管理系统等这些互联网作品基本都会用它的,按业务需求场景去封装你的作品输出服务。
简单吧!学会flex + div,在你的互联网产品绘制之路,快速便捷的实战,无论是自由原创、还是看图仿制都是可以的,不限制你的想象空间,就像我们画家一样,可以自由创作作品,也可看图,看景创景作品,实际工作是会沟通好场景需求,在去创作,才服务满足顾客需求意向,以更好去交付获得收益。
拜拜!下期再见!
本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 sumchina520@foxmail.com 举报,一经查实,本站将立刻删除。
如若转载,请注明出处:https://www.huoyanteam.com/21533.html