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>
然后你就会得到这样的结果:
这样的结果往往是不够的，因为你经常想看到你的产品可以水平放置。换句话说，你想把多个产品放在一行，flex可以在这个时候帮助你。
flex布局的基本概念
flex实际上就像一个网球桶，类似于计算机系经常学习的栈stack的概念。当然，请注意，我在这里说的是类似只是。这样的桶，只有一个入口(当然，有很多网球桶是双向的)，你可以把很多网球放进去。
每个网站通常由一行一行的布局组成，如下图所示。每个网站都会有导航、横幅、一些产品和页面末尾。
通过flex布局，我们可以在每条线上放一些盒子。这些盒子可以大也可以小。
你需要学习这个代码吗？
答案是不需要。这里解释的原因是为了帮助跨境人员更好地理解以下事情：
- 使用flexx的SaaS建站工具和wordpressbuilder box布局。现在我明白了flex布局能做什么，不能做什么。可以更好的判断如何装修。
- flex布局有助于手机适配。换句话说，如果你用好flex布局，你的网站可以在移动和PC上优雅正常地浏览。
- 它可以让你更好地判断哪种车站建设工具更好。一个优秀的车站建设工具应该可以随意调整盒子模型和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布局将如下，而右侧的所有空间都将被浪费：
然后，我们将css片段flex添加到产品1的盒子模型中-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这样的人很有用，但不必要，没有列出
