如何使用 flex + div 绘制互联网作品？

你好，本文属于技术类文章，建议有本领域的技术基础者阅读，以便更好地理解。

这篇文章分两个步骤讲解，如下：

第一步：什么是 flex + div 呢？

flex 是css的一套布局方案，一个一维布局模型；是Flexible Box的缩写，意思就算“弹性布局”，理解flex概念使用，记住下面两点即可：

1. flex布局的两根轴线：x轴和y轴（有些会叫主轴与交叉轴、水平线与垂直线，我喜欢用x与y描述更简洁些）。
2. flex容器和flex子元素（任何一元素标签都可以设置为flex容器，而被设置flex容器包裹在内的子元素，就是flex子元素）。

div 其就是一个普通html元素标签，大部分内容都是可以基于这个元素标签封装的，形成一个复用性大，共用性好的新元素标签。

第二步：如何使用 flex + div 来绘制作品，哪些场景的作品可以使用？

首先如何使用，下面我们直接看一个封装好的例子元素标签，给拆解出来讲解如何使用，其他举一反三即可：

图-1-1

这是一个普通货品上架的卡片信息内容，它就是一个flex+div结构绘制，被红线圈出来，都是一个个的flex+div内容布局，外层定义flex容器，内部就是该flex容器子元素内容，这些内容子元素，都flex布局排列x-y轴方向的信息，简单吧！所以几乎大部分的页面内容都可以使用这flex+div方式可以封装你的业务标签组件，以便复用，flex布局元素排列好，设置每个元素的内外边距、样式、字体、颜色这些标签属性，就看到这样一个通用的普通组件标签场景了。

简单吧！这就是一个flex+div绘制互联网作品，商品上架的货品卡片，多个就复用该标签组件形成一个列表展示了。

如下代码标签，就是这个货品使用flex + div方式绘制的，只有你确定了页面内容flex结构层级，即可快速绘制出来：

图-1-2

哪些场景会用到了，网站、小程序、管理系统等这些互联网作品基本都会用它的，按业务需求场景去封装你的作品输出服务。

简单吧！学会flex + div，在你的互联网产品绘制之路，快速便捷的实战，无论是自由原创、还是看图仿制都是可以的，不限制你的想象空间，就像我们画家一样，可以自由创作作品，也可看图，看景创景作品，实际工作是会沟通好场景需求，在去创作，才服务满足顾客需求意向，以更好去交付获得收益。

拜拜！下期再见！