你好，本文屬于技術(shù)類文章，建議有本領(lǐng)域的技術(shù)基礎(chǔ)者閱讀，以便更好地理解。
這篇文章分兩個步驟講解，如下：
第一步：什么是 flex + div 呢？
flex 是css的一套布局方案，一個一維布局模型；是Flexible Box的縮寫，意思就算“彈性布局”，理解flex概念使用，記住下面兩點(diǎn)即可：
- flex布局的兩根軸線：x軸和y軸（有些會叫主軸與交叉軸、水平線與垂直線，我喜歡用x與y描述更簡潔些）。
- flex容器和flex子元素（任何一元素標(biāo)簽都可以設(shè)置為flex容器，而被設(shè)置flex容器包裹在內(nèi)的子元素，就是flex子元素）。
div 其就是一個普通html元素標(biāo)簽，大部分內(nèi)容都是可以基于這個元素標(biāo)簽封裝的，形成一個復(fù)用性大，共用性好的新元素標(biāo)簽。
第二步：如何使用 flex + div 來繪制作品，哪些場景的作品可以使用？
首先如何使用，下面我們直接看一個封裝好的例子元素標(biāo)簽，給拆解出來講解如何使用，其他舉一反三即可：
圖-1-1
這是一個普通貨品上架的卡片信息內(nèi)容，它就是一個flex+div結(jié)構(gòu)繪制，被紅線圈出來，都是一個個的flex+div內(nèi)容布局，外層定義flex容器，內(nèi)部就是該flex容器子元素內(nèi)容，這些內(nèi)容子元素，都flex布局排列x-y軸方向的信息，簡單吧！所以幾乎大部分的頁面內(nèi)容都可以使用這flex+div方式可以封裝你的業(yè)務(wù)標(biāo)簽組件，以便復(fù)用，flex布局元素排列好，設(shè)置每個元素的內(nèi)外邊距、樣式、字體、顏色這些標(biāo)簽屬性，就看到這樣一個通用的普通組件標(biāo)簽場景了。
簡單吧！這就是一個flex+div繪制互聯(lián)網(wǎng)作品，商品上架的貨品卡片，多個就復(fù)用該標(biāo)簽組件形成一個列表展示了。
如下代碼標(biāo)簽，就是這個貨品使用flex + div方式繪制的，只有你確定了頁面內(nèi)容flex結(jié)構(gòu)層級，即可快速繪制出來：
圖-1-2
哪些場景會用到了，網(wǎng)站、小程序、管理系統(tǒng)等這些互聯(lián)網(wǎng)作品基本都會用它的，按業(yè)務(wù)需求場景去封裝你的作品輸出服務(wù)。
簡單吧！學(xué)會flex + div，在你的互聯(lián)網(wǎng)產(chǎn)品繪制之路，快速便捷的實(shí)戰(zhàn)，無論是自由原創(chuàng)、還是看圖仿制都是可以的，不限制你的想象空間，就像我們畫家一樣，可以自由創(chuàng)作作品，也可看圖，看景創(chuàng)景作品，實(shí)際工作是會溝通好場景需求，在去創(chuàng)作，才服務(wù)滿足顧客需求意向，以更好去交付獲得收益。
拜拜！下期再見！
