三个属性让你学会书写横向滑动窗口！内附代码和详解！

先说结论：

父组件添加：
display: flex;
overflow-x: auto;

子组件添加：
flex-shrink: 0;

下面进行详细讲述。

在书写滑动页面之前，最好了解一下flex布局的基本原理和常用属性，以下链接介绍较详细，图文并茂，强烈推荐

https://cloud.tencent.com/developer/article/2122374

初始代码和界面如下所示，显示为三个长宽固定的组件，默认从上到下排列

<div className='father'>
    <div className='child1'>child1 child1 child1 child1 child1 child1 child1 child1 child1 child1 child1</div>
    <div className='child2'>child2</div>
    <div className='child3'>child3</div>
</div>
 
.child1 {
    background-color: coral;
    width: 200px;
    height: 100px;
}
.child2 {
    background-color:aquamarine;
    width: 200px;
    height: 100px;
}
.child3 {
    background-color:darkgreen;
    width: 200px;
    height: 100px;
}

父组件改为flex布局之后，子组件默认横向排列，代码和组件如下所示。

<div className='father'>
    <div className='child1'>child1 child1 child1 child1 child1 child1 child1 child1 child1 child1 child1</div>
    <div className='child2'>child2</div>
    <div className='child3'>child3</div>
</div>
 
 
.father {
    display: flex;
}
.child1 {
    background-color: coral;
    width: 200px;
    height: 100px;
}
.child2 {
    background-color:aquamarine;
    width: 200px;
    height: 100px;
}
.child3 {
    background-color:darkgreen;
    width: 200px;
    height: 100px;
}

此时子组件child1、child2和child3明显宽度变窄了，要是想保持子组件宽度不变，需要在子组件上添加flex-shrink: 0约束。之所以设置这个属性有用，是因为在默认情况下，flex-shrink的值为1，父元素宽度不够时，子元素会自己调整所占的宽度比。设置为0则表示不适应性缩小。

<div className='father'>
    <div className='child1'>child1 child1 child1 child1 child1 child1 child1 child1 child1 child1 child1</div>
    <div className='child2'>child2</div>
    <div className='child3'>child3</div>
</div>
 
 
.father {
    display: flex;
}
.child1 {
    flex-shrink: 0;
    background-color: coral;
    width: 200px;
    height: 100px;
}
.child2 {
    flex-shrink: 0;
    background-color:aquamarine;
    width: 200px;
    height: 100px;
}
.child3 {
    flex-shrink: 0;
    background-color:darkgreen;
    width: 200px;
    height: 100px;
}

此时宽度就恢复了，但是超出父组件的部分被默认隐藏了。为了让它能够横向滑动，需要添加overflow-x: auto;或者overflow-x:scroll;都会提供滚动机制。

<div className='father'>
    <div className='child1'>child1 child1 child1 child1 child1 child1 child1 child1 child1 child1 child1</div>
    <div className='child2'>child2</div>
    <div className='child3'>child3</div>
</div>
 
 
.father {
    display: flex;
    overflow-x: auto;
}
.child1 {
    flex-shrink: 0;
    background-color: coral;
    width: 200px;
    height: 100px;
}
.child2 {
    flex-shrink: 0;
    background-color:aquamarine;
    width: 200px;
    height: 100px;
}
.child3 {
    flex-shrink: 0;
    background-color:darkgreen;
    width: 200px;
    height: 100px;
}

下图是滑动到中间时的效果，滑动的时候下面会出现滑动条。

除此之外还有一个属性常被提到，即white-space，可以控制自组件内的文字不换行，如下图所示。具体该属性可以根据要求更改，可参考阮一峰大佬对该属性的解释：https://www.ruanyifeng.com/blog/2018/07/white-space.html。

<div className='father'>
    <div className='child1'>child1 child1 child1 child1 child1 child1 child1 child1 child1 child1 child1</div>
    <div className='child2'>child2</div>
    <div className='child3'>child3</div>
</div>
 
 
.father {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
}
.child1 {
    flex-shrink: 0;
    background-color: coral;
    width: 200px;
    height: 100px;
}
.child2 {
    flex-shrink: 0;
    background-color:aquamarine;
    width: 200px;
    height: 100px;
}
.child3 {
    flex-shrink: 0;
    background-color:darkgreen;
    width: 200px;
    height: 100px;
}