牛津小马哥-独立站运营之“装修需要懂的flex布局”

什么是flex布局，flex是最常用的网站布局方式之一。通过使用flex布局，我们可以很好的操作网站上的各个盒子的布局，从而达到一个装修独立站的目的。我希望你在看这篇文章之前，已经对盒子有一个基本的概念。

如果你不了解盒子，通俗点讲就是，一个网站的内容是通过无数个盒子构建起来的。每个盒子有自己的一些属性。你可以把内容放进去盒子里面，然后再通过排版和布局这些盒子，得到自己想要的界面效果。

一、为什么你需要flex布局

你之所以需要flex布局是因为默认布局是一行，而div是构建出一个网站的基本元素（这里并不希望用专业的语气去讲解，而是希望是通俗点）。当你使用div去装修你的产品页面的时候，你会发现，每个div会占据一行。假设你的代码是这样的：

div

这里备注强调一下，在dom中，并不仅仅只有div，还有很多别的，例如span/ul/ol/li等。这里为了给跨境从业人员强调解释flex的作用，将用div作为示范

<div>

<div>

product产品 1

div>

<div>

product产品 2

div>

<div>

product产品 3

div>

div>

那么你会获得一个这样的结果：

这样的结果往往是不够的，因为你经常都希望看到，你的产品是能横向摆放的。换种说法，你希望一行里放下多个产品，而这个时候，flex就能帮到你。

二、flex布局的基本概念

flex其实就像是一个网球的球桶，也类似于计算机系经常学习的栈stack的概念，当然，请注意，我这里所说的是类似而已。这么一个桶，只有一个入口（当然，有很多网球桶是双向的），而你可以往里面存入很多很多个网球。

而每个网站，往往都是通过一行一行的布局所构成的，如下图。每个网站会有导航，会有横幅，会有一些产品，然后还有页尾。

通过flex布局，我们可以往每一行里，放入一些盒子。而这些盒子，可以大，可以小。

三、你需要学会这个代码么？

答案是不需要。这里之所以讲解这个，是为了帮助跨境人能更好的理解以下事情：

1. 1.常用的SaaS建站工具和wordpress的builder都是在使用flex box布局。现在理解了flex布局可以做什么，不可以做什么。可以更好地判断到底如何装修。

2. 2.flex布局可以帮助做手机适配。换种说法，如果你用好了flex布局，你的网站在移动端和pc端都能优雅的正常浏览。

3. 3.可以让你更好判断到底哪个建站工具更好。一个优秀的建站工具应该是可以随意调整盒子模型和flex布局的。

接下来我们来继续讲解flex的可以与不可以。

四、flex布局可以自动适配手机

通过使用flex-wrap的功能（一般建站工具都会自动使用），你的内容会在手机端（小屏幕）下，自动从横排变成竖排

// 这是一行css命令，

// 配合flexbox使用，

// 可以实现手机自动适配。

// 这可以帮助在手机端下，从横排转换成竖排

// 当然，你可以不使用这个，而是结合 @media 和 flex-direction 实现同样的效果。

flex-wrap: wrap;

当你使用了flex-wrap之后，PC端访问你的网站，看你的产品是横向的。

而手机端访问的时候，将会自动变成竖状的。

五、flex布局可以轻松自动调整长度

我们有的时候，希望有一部分的内容，可以自动的变大或者变小。例如，你产品页的一些图片。这个时候我们就需要使用到

flex-grow

// 这是一行css代码

// 通过这一行代码，可以让里面的内容自动调整长度

flex-grow: 1; // 让每个盒子自动生长

当你还没有使用flex-grow的时候，你的flex布局会是如下的情况，而右边的全部空间，都是浪费掉的：

然后接下来，我们给产品1的盒子模型添加一个css片段。你会发现，它的长度就开始自然生长了。

flex-grow: 1;

当然，你也可以给每一个产品的盒子，都添加，那么它们都会生长，而且还很平等。

flex-grow: 1;

六、常用css

不排除有一部分人在装修的时候，想要进行一些调整的。而这里的css就是最常用的flex布局相关的了。

// 以下css

// 用在flex布局上，也就是管道（前面所说的网球盒子）

display: flex;

align-items: center; // 如何横向排版，前提是flex-direction默认为row时

justify-content: center; // 如何纵向排版，前提是flex-direction默认为row时

// 以下css

// 用在flex布局内的盒子上，也就是网球（前面所说的网球盒子内所装着的网球）

flex-grow: 1; // 允许它自由生长

// 这里并没有要覆盖完全部flex相关的css，

// 只罗列出了常用的

// 像flex-direction这类很有用，但是非必要性的，就没有罗列出来

（来源：牛津小马哥） 内容皆为原创，未经作者允许，禁止搬运或者洗稿行为