獨立站運營——裝修需要懂的flex布局

什么是flex布局，flex是最常用的網(wǎng)站布局方式之一。通過使用flex布局，我們可以很好的操作網(wǎng)站上的各個盒子的布局，從而達到一個裝修獨立站的目的。我希望你在看這篇文章之前，已經(jīng)對盒子有一個基本的概念。如果你不了解盒子，通俗點講就是，一個網(wǎng)站的內(nèi)容是通過無數(shù)個盒子構(gòu)建起來的。每個盒子有自己的一些屬性。你可以把內(nèi)容放進去盒子里面，然后再通過排版和布局這些盒子，得到自己想要的界面效果。

為什么你需要flex布局

你之所以需要flex布局是因為div默認布局是一行，而div是構(gòu)建出一個網(wǎng)站的基本元素（這里并不希望用專業(yè)的語氣去講解，而是希望是通俗點）。當你使用div去裝修你的產(chǎn)品頁面的時候，你會發(fā)現(xiàn)，每個div會占據(jù)一行。假設(shè)你的代碼是這樣的：

！提示！這里備注強調(diào)一下，在dom中，并不僅僅只有div，還有很多別的，例如span/ul/ol/li等。這里為了給跨境從業(yè)人員強調(diào)解釋flex的作用，將用div作為示范

<!-- div總是有一個開始符 <div>，和一個結(jié)束符 </div>。中間就是被這個div所容下的內(nèi)容 -->

<div>

<div> 

product產(chǎn)品 1

</div>

<div>

product產(chǎn)品 2

</div> 

<div>

product產(chǎn)品 3

</div>

</div>

那么你會獲得一個這樣的結(jié)果：

這樣的結(jié)果往往是不夠的，因為你經(jīng)常都希望看到，你的產(chǎn)品是能橫向擺放的。換種說法，你希望一行里放下多個產(chǎn)品，而這個時候，flex就能幫到你。

flex布局的基本概念

flex其實就像是一個網(wǎng)球的球桶，也類似于計算機系經(jīng)常學(xué)習(xí)的棧stack的概念，當然，請注意，我這里所說的是類似而已。這么一個桶，只有一個入口（當然，有很多網(wǎng)球桶是雙向的），而你可以往里面存入很多很多個網(wǎng)球。

而每個網(wǎng)站，往往都是通過一行一行的布局所構(gòu)成的，如下圖。每個網(wǎng)站會有導(dǎo)航，會有橫幅，會有一些產(chǎn)品，然后還有頁尾。

通過flex布局，我們可以往每一行里，放入一些盒子。而這些盒子，可以大，可以小。

你需要學(xué)會這個代碼么？

答案是不需要。這里之所以講解這個，是為了幫助跨境人能更好的理解以下事情：

1. 常用的SaaS建站工具和wordpress的builder都是在使用flex box布局?，F(xiàn)在理解了flex布局可以做什么，不可以做什么?？梢愿玫嘏袛嗟降兹绾窝b修。
2. flex布局可以幫助做手機適配。換種說法，如果你用好了flex布局，你的網(wǎng)站在移動端和pc端都能優(yōu)雅的正常瀏覽。
3. 可以讓你更好判斷到底哪個建站工具更好。一個優(yōu)秀的建站工具應(yīng)該是可以隨意調(diào)整盒子模型和flex布局的。

接下來我們來繼續(xù)講解flex的可以與不可以。

flex布局可以自動適配手機

通過使用flex-wrap的功能（一般建站工具都會自動使用），你的內(nèi)容會在手機端（小屏幕）下，自動從橫排變成豎排

// 當然，你可以不使用這個，而是結(jié)合 @media 和 flex-direction 實現(xiàn)同樣的效果。

flex-wrap: wrap;

當你使用了flex-wrap之后，PC端訪問你的網(wǎng)站，看你的產(chǎn)品是橫向的。

而手機端訪問的時候，將會自動變成豎狀的。

flex布局可以輕松自動調(diào)整長度

我們有的時候，希望有一部分的內(nèi)容，可以自動的變大或者變小。例如，你產(chǎn)品頁的一些圖片。這個時候我們就需要使用到flex-grow

// 通過這一行代碼，可以讓里面的內(nèi)容自動調(diào)整長度

flex-grow: 1; // 讓每個盒子自動生長

當你還沒有使用flex-grow的時候，你的flex布局會是如下的情況，而右邊的全部空間，都是浪費掉的：

然后接下來，我們給產(chǎn)品1的盒子模型添加一個css片段flex-grow: 1;。你會發(fā)現(xiàn)，它的長度就開始自然生長了。

當然，你也可以給每一個產(chǎn)品的盒子，都添加flex-grow: 1;，那么它們都會生長，而且還很平等。

常用css

不排除有一部分人在裝修的時候，想要進行一些調(diào)整的。而這里的css就是最常用的flex布局相關(guān)的了。

// 用在flex布局上，也就是管道（前面所說的網(wǎng)球盒子）

display: flex; align-items: center; // 如何橫向排版，前提是flex-direction默認為row時

justify-content: center; // 如何縱向排版，前提是flex-direction默認為row時

// 用在flex布局內(nèi)的盒子上，也就是網(wǎng)球（前面所說的網(wǎng)球盒子內(nèi)所裝著的網(wǎng)球）

flex-grow: 1; // 允許它自由生長

// 像flex-direction這類很有用，但是非必要性的，就沒有羅列出來

（來源：牛津小馬哥）

以上內(nèi)容屬作者個人觀點，不代表雨果跨境立場！本文經(jīng)原作者授權(quán)轉(zhuǎn)載，轉(zhuǎn)載需經(jīng)原作者授權(quán)同意。

（來源：牛津小馬哥）

以上內(nèi)容屬作者個人觀點，不代表雨果跨境立場！本文經(jīng)原作者授權(quán)轉(zhuǎn)載，轉(zhuǎn)載需經(jīng)原作者授權(quán)同意。?