牛津小马哥沙雕跨境电商KOL,一个无趣的it男。
个人微信
公众号
视频号
更新时间2022-03-20

独立站装修需要懂的flex布局

什么是flex布局,flex是最常用的网站布局方式之一。通过使用flex布局,我们可以很好的操作网站上的各个盒子的布局,从而达到一个装修独立站的目的。我希望你在看这篇文章之前,已经对盒子有一个基本的概念。如果你不了解盒子,通俗点讲就是,一个网站的内容是通过无数个盒子构建起来的。每个盒子有自己的一些属性。你可以把内容放进去盒子里面,然后再通过排版和布局这些盒子,得到自己想要的界面效果。

为什么你需要flex布局

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

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

<!--  div总是有一个开始符 <div>,和一个结束符 </div>。中间就是被这个div所容下的内容  -->
<div>
<div>
product产品 1
</div>
<div>
product产品 2
</div>
<div>
product产品 3
</div>
</div>

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

product产品 1
product产品 2
product产品 3

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

product产品 1
product产品 2
product产品 3

flex布局的基本概念

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

Screen Shot 2021-07-21 at 1.31.55 PM-min.png

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

navigation导航栏1行
banner横幅1行
products产品1行
products产品2行
products产品3行
products产品4行
footer页尾

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

产品1
产品2
产品3

你需要学会这个代码么?

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

  1. 常用的SaaS建站工具和wordpress的builder都是在使用flex box布局。现在理解了flex布局可以做什么不可以做什么。可以更好地判断到底如何装修。
  2. flex布局可以帮助做手机适配。换种说法,如果你用好了flex布局,你的网站在移动端pc端都能优雅的正常浏览。
  3. 可以让你更好判断到底哪个建站工具更好。一个优秀的建站工具应该是可以随意调整盒子模型和flex布局的。

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

flex布局可以自动适配手机

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

// 这是一行css命令,
// 配合flexbox使用,
// 可以实现手机自动适配。
// 这可以帮助在手机端下,从横排转换成竖排
// 当然,你可以不使用这个,而是结合 @media 和 flex-direction 实现同样的效果。
flex-wrap: wrap;

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

产品1
产品2
产品3

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

产品1
产品2
产品3

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

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

// 这是一行css代码
// 通过这一行代码,可以让里面的内容自动调整长度
flex-grow: 1; // 让每个盒子自动生长

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

产品1
产品2
产品3
浪费了这些空间

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

产品1(并且添加了flex-grow: 1)
产品2
产品3

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

产品1(已添加了flex-grow)
产品2(已添加了flex-grow)
产品3(已添加了flex-grow)

常用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这类很有用,但是非必要性的,就没有罗列出来