flex布局进阶

推荐看一下阮一峰老师的flex布局博客【Flex 布局教程：语法篇】(https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html#)，讲的非常清晰。

一、多行布局大小相同的子盒子技巧

使用弹性布局实现多行均匀布局时，如若子盒子数量不能被每行规定的子盒子数量整除时，该如何实现最后一行的子盒子和其他行的子盒子垂直对齐呢？

如下代码：

<template><div class="container"><div class="item" v-for="item, index in 5" :key="index"></div></div>
</template><style lang="scss" scoped>
.container {width: 1000px;height: 400px;background-color: pink;margin: 100px;display: flex;justify-content: space-between;flex-wrap: wrap;.item {width: 30%;height: 100px;background-color: gray;}
}
</style>

在这里插入图片描述

可以看到最后的一行只有两个子盒子，它们根据jusctify-content: space-between的规则贴在父盒子的两边，而业务需求是：最后一行的子元素必须按顺序和其他的子元素垂直对齐，那么如何在不影响其他行布局的前提下实现最后一行的子盒子按顺序和其他行的子盒子垂直对齐呢？我们可以使用伪元素+元素不可见来实现。

我们给父盒子增加一个宽度和子盒子一样宽的伪元素：

.container::after {content: '';width: 30%;visibility: hidden;
}

visibility:hidden实现了将元素隐藏，但是元素在网页中该占的位置还是占着的。

这样就成功完成了需求：
在这里插入图片描述

二、flex-flow

flex-flow属性时flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

这里我们在上一小节的基础上，使用flex-flow代替flex-warp来测试一下flex-flow属性。

.container {width: 1000px;height: 400px;background-color: pink;margin: 100px;display: flex;justify-content: space-between;flex-flow: row wrap;  // 得到的效果是一样的.item {width: 30%;height: 100px;background-color: gray;}
}

得到了相同的结果。
在这里插入图片描述

三、flex-start | flex-end

center | space-between | space-around

justify-content的这三个属性值的使用早已游刃有余了，这里我记录一下较为陌生的两个属性：

flex-start(默认值) | flex-end

flex-start是弹性布局的默认水平对齐方式，也就是左对齐，显然，flex-end就是右对齐了。

四、align-items属性进阶

和水平对齐方式一样的道理，垂直对齐方式align-item也有flex-start和flex-end，不过它们分别代表上对齐和下对齐，下对齐常用于解决flex单行布局由于子盒子高度不同而导致子盒子下边界不在同一水平线的问题。如下

<template><div class="container"><div class="item1"></div><div class="item2"></div><div class="item3"></div></div>
</template><style lang="scss" scoped>
.container {width: 1000px;height: 400px;background-color: pink;margin: 100px;display: flex;justify-content: space-between;// align-items: flex-end;div {width: 30%;background-color: gray;}.item1 {height: 100px;}.item2 {height: 200px;}.item3 {height: 300px;}
}
</style>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bEQwf724-1690120788048)(C:\Users\22706\AppData\Roaming\Typora\typora-user-images\image-20230723212133179.png)]$

给父盒子添加align-items: flex-end后，实现了子盒子下边界在同一水平线上。如下：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iVHHIwS5-1690120788048)(C:\Users\22706\AppData\Roaming\Typora\typora-user-images\image-20230723212641092.png)]$

align-items: flex-start | flex-end | center | baseline | stretch(默认);

值得注意的是弹性布局的垂直对齐方式默认并是上对齐，而是stretch，那么stretch是什么效果呢？stretch有延伸、张开、弹性的的意思，在弹性布局中就表示如果父盒子没有给高度并且使用了flex布局，那么父盒子的高度将由子盒子决定，根据子盒子的高度来自动撑开父盒子。

这里再了解一下属性基线对齐：

baseline: 子盒子与第一行文字的基线对齐。

css中的基线(baseline0)并不是汉字文字的下端沿，而是英文字母x的下端沿，如下图：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CpuVoPeZ-1690120788048)(C:\Users\22706\AppData\Roaming\Typora\typora-user-images\image-20230723215602328.png)]$