后端通向前端的第一站：flex

flex 是什么玩意

你肯定会觉得离了个大谱，后端写前端难道只需要知道 flex 么？

不，当然不是...

~~当我得出这个结论的时候，我也一脸懵逼。~~

请让我解释！！！

因为当我与身边以及网上的后端朋友沟通后发现，javascript 对于后端而言并不复杂，甚至不需要刻意学习。

如果使用 Vue 或者 React，上手更快速。

然而...

当他们面对 html/css 的时候，就陷入了混乱。

这与后端语言的语法有本质的区别，编码形式完全不同。

尤其面对需要从 0 开始构建页面时，布局就会成为阻拦他们的第一道难关。

但是!!!

如果使用 flex 布局，一切都将变得简单起来。

div flex margin padding

就可以应对绝大多数的布局需求。

而不需要去面对诸如盒模型，浮动，定位等等，以及各种复杂的标签或属性。

使用 flex 可以快速实现布局

接下来我们只谈布局

为什么只谈布局？

因为其他样式也好，标签也好，属性也罢，大部分可以搜索到。

而布局则很难用语言描述去搜索。

我们将编写布局分为 2 个步骤：

拆分设计图结构
coding

ok，let's do it！！！

首先，我们需要拆分设计图结构。

拆分设计图结构

我想想，我们就以美团 APP 的首页为例吧。~~因为用的最多~~

ok，首先我们可以先把这个页面分为 3 个部分：

搜索栏
功能宫格
个性推荐

tabbar 我们先忽略，因为实际开发时，一般会使用第三方组件来实现。

如果你问我为啥会拆分为这 3 个部分...直觉...

你也可以按照自己的理解去拆分，只要保障拆分后的部分之间没有交集，并且是矩形即可。

下面我们继续对搜索栏进行拆分。

搜索栏

懒得 P 图了，直接上代码。

html 复制代码

<div class="p-l p-r h-20 bg-white">
  <div class="flex items-center h-8">
    <div class="w-5 h-5 bg-amber"></div>
    <div class="flex-1 h-8 bg-blue"></div>
  </div>
  <div class="flex items-center justify-between h-12">
    <div class="w-78 h-12 bg-blueGray"></div>
    <div class="w-5 h-5 bg-black"></div>
  </div>
</div>

我没有直接去写 css，使用的是 tailwindcss，可以使用类名去表示 css，方便更直观的理解布局。

如果你对于其中的类名有疑问，可以自行搜索。

ok，实现这个布局，我们只用到了 div 这一个标签，以及 flex、padding、width、height 这几个属性。

非常简单，不是么？

所以...

后面的功能宫格和个性宫格，我不打算写了。🤣🤣

为什么 flex 可以很简单的实现布局

如果你使用过任何 UI 设计工具，例如 Figma、Sketch、Adobe XD 等等。

你会发现，当使用设计工具去设计界面时，

人们总会将元素以中心线为基准，对其中的元素进行对齐或者分布，

当然，这也符合人们的习惯。

人们在设计任何事物的时候，总会遵循一定规则。

这些在 flex 布局中，也都可以通过属性去实现。

设计工具	flex 布局
中心线	flex-direction
换行	flex-wrap
分布	justify-content
对齐	align-items
多轴对齐	align-content

这样，也就可以理解为什么 flex 可以很简单的实现布局了。

至于 flex 布局的详细教程，拜托自行搜索啦。

到最后啦

如果有打开你写布局时的思路，那就太好啦~

当然，也可以去了解下 grid 布局。

如果你有更好的方法，在下面评论吧~

掰掰啦~~~