关于 flex 布局在日常工作中的使用

Love The Way You Lie 2023-01-18 02:22 110阅读 0赞

> 前端人员大部分其实觉得样式贼简单，感觉JS才有挑战性，忽略了样式的重要性，导致写出来的页面适配性不高。  
>   
>   
> 其实现在常用的比较好的布局为 flex 和 grid。  
>   
>   
> 工作过程中，发现好多人依旧在布局的过程中死磕 position 和 float，导致页面换了分辨率就掉下来，或者就乱掉了。  
>   
>   
> 所以总结一下我经常在工作中常用的一些 flex 布局的用法，也是为了不用每次用到都要打开阮一峰的博客来搜索。

**这里也并不是说哪种好哪种不好，只是要灵活使用，不能死磕！！！**

（若总结出错可联系博主，仅用于学习交流）

先放上基础用法：[Flex 布局教程：语法篇][Flex]

## 宫格布局 ##

此部分应该为最简单的用法，就是宫格布局

不论是在移动端还是PC端，宫格布局都是最常见也适合使用 flex 布局的样式。

关于宫格布局我做过总结，这里不再赘述，直接跳转访问 —— [小程序宫格布局][Link 1]

## 左右上下居中 ##

之前刚学习前端的时候，最常见的考题就是让父元素中的子元素上下左右居中。那时候最常用的方法就是 `margin: 0 auto;`当然是用这一行代码也有许多先决条件

看其中代码，可以知道如果只是给子元素给定 margin: 0 auto; 只能左右居中，上下并不能居中。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 1]  
经过百度得出可以上下左右居中的代码为：

结果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 2]  
当我们是用 flex 布局的时候几行代码就可以解决

结果如成功页面，不再重复写了，大家可以看到这里我们的代码其实简化了不少。

## 两个子元素一左一右 ##

此种常见于左边显示 title，右边显示箭头或者更多字样

之前的常用方法为：给父元素 padding ，然后左浮动，右浮动，当然这里要注意清除浮动，好多新手都忘了清除浮动，以至于元素空间全部都是0了

常规做法：

可以看到这是我没有清除浮动的效果  
![在这里插入图片描述][2021043010392280.png]  
清除浮动之后：（给定高度或者overflow都可以，方法挺多的）

![在这里插入图片描述][20210430104045567.png]  
我们接下来使用 flex 试试，代码如下，效果同上：

**其他比较复杂的写法也是通过 flex 进行嵌套去实现的，都是建立在这种比较简单的布局的基础上！**

暂时能总结出来好用的方法就上面了，都是比较简单的用法。后续遇到更绝妙的用法，持续更新！

[Flex]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[Link 1]: https://blog.csdn.net/lb1135909273/article/details/99636153
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70]: /images/20221021/72a4a8ee3e914bfb93c65e79274d03c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 1]: /images/20221021/d5d2fd2bf62d4fd98e56d6ed20048119.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 2]: /images/20221021/c837a141e77441f9b6efcf8205dbec2a.png
[2021043010392280.png]: /images/20221021/9ab75114a053486b9b9a831c735eeb53.png
[20210430104045567.png]: /images/20221021/2a462b24341e4d4fb4ad4ed667ef06a5.png