CSS Flex 布局实际应用
简介
什么是CSS Flex布局
Flex 布局的元素，可以称为“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目。容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。
为什么CSS Flex布局在现代Web设计中变得越来越流行
1.简化布局
Flex布局是一种简洁、灵活的布局方式，通过简单的属性设置就可以实现复杂的布局效果，避免了繁琐的float和position属性的使用。
2.响应式布局
Flex布局是一种响应式的布局方式，可以根据不同的屏幕尺寸和设备适应性地调整布局，适合移动设备和响应式网页设计。
3.自适应子元素大小
Flex布局可以根据容器的大小自动调整子元素的大小，实现自适应布局效果，适应不同的设备屏幕。
4.简化垂直居中
Flex布局可以轻松实现容器内部元素的垂直居中，无需使用复杂的计算和定位。
5.灵活的顺序控制
Flex布局可以通过设置order属性调整子元素的顺序，使得在不同的布局环境下元素的显示顺序可以灵活变化。
居中问题
如何使用CSS Flex布局来居中元素
flex布局使元素居中很容易实现,外部为flex容器
1. 水平居中
justify-content: center
2. 垂直居中
align-items: center;
实现元素水平垂直居中
// flex容器为container
.container {
display: flex;
justify-content: center;
align-items: center;
}align-self属性
align-self 属性定义flex子项纵轴方向上的对齐方式。
css语法如下：
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
溢出问题
在CSS Flex布局中可能发生的溢出问题
溢出问题的原因
当flex容器设置了 flex-wrap: nowrap 时，如果其中的flex项宽度、高度不足以完全放置在容器内，则会溢出。
解决方法：
1.设置flex容器的 min-width 或 min-height 属性可解决。
.flex-container {
display: flex;
min-width: fit-content; /* 可根据实际情况设置 */
}2.使用flex的缩放特性。
设置flex值，如果值为1，则为1:1，如果为2，则为2:1，以此类推。同时使用overflow: hidden来保证溢出内容不显示出来。
.flex-item {
flex: 1 1 auto; /* flex-grow, flex-shrink, flex-basis */
overflow: hidden;
}3.使用flex的max-width或max-height属性。
.flex-item {
flex: 0 1 auto;
max-width: 100%; /* 根据实际情况设置 */
}滚动截断问题
在CSS Flex布局中可能发生的滚动截断问题
当外层的容器是定宽的，内层的 项目 也是定宽的。
当 flex-item 个数较小时，是没有问题的。但是，如果当元素内容过多，并且设置了 flex-wrap: nowrap 的话，内容就会溢出容器：
解决方法：
1. Flex 布局下关键字 safe、unsafe
从 Chrome 115 开始，flex 布局下新增了两个关键字 safe 和 unsafe
ul {
width: 500px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
justify-content: safe center;
align-items: center;
gap: 10px;
}缺点：兼容性不好
2. 使用 margin: auto 替代 justify-content: center
ul {
width: 500px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 10px;
}
li {
margin: auto;
}当 flex-item 的数量溢出父容器宽度时候，由于没有剩余空间了，此时 margin: auto 其实相当于失效了，因此布局上的效果同样也是采用类似于 justify-content: flex-start 的效果进行排布。
缺点：margin: auto 的方式，flex-item 之间的间距是不可控。因为它们始终会去平分剩余空余空间。
3. 额外嵌套一层
该方法应该是最完美的解决方案
就是我们在外部多嵌套一层
原结构：
<ul class="g-contaner"> <li></li> // ... <li></li> </ul>
修改后的结构：
<ul class="g-contaner"> <ul class="g-wrap"> <li></li> // ... <li></li> </ul> </ul>
代码如下：
.g-contaner {
width: 500px;
height: 200px;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: center;
align-items: center;
overflow: auto;
}
.g-wrap {
display: flex;
gap: 10px;
max-width: 100%;
}