Article directory
I encountered the following problems during development:
justify-content :centerWhen the and attributes are added to the style of a container at the same time overflow-x: auto, when the content length exceeds the length of the container, the problem of the content on the left being cropped will occur.
<style>
.prop-list {
width: 500px;
height: 100px;
background: rgba(167, 155, 180, 0.3);
border: 3px solid rgba(68, 203, 245, 0.3);
border-radius: 10px;
display: flex;
justify-content: space-around;
align-items: center;
overflow-x: auto;
margin: auto;
}
.prop-item {
min-width: 70px;
height: 70px;
margin: 0 10px;
background-color: lightcyan;
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 10px;
text-align: center;
line-height: 70px;
font-size: 20px;
font-weight: 900;
}
</style>
<body>
<div class="prop-list">
<div class="prop-item">1</div>
<div class="prop-item">2</div>
<div class="prop-item">3</div>
<div class="prop-item">4</div>
<div class="prop-item">5</div>
<div class="prop-item">6</div>
<div class="prop-item">7</div>
<div class="prop-item">8</div>
</div>
</body>
Effect:
reason
The setting justify-content :centermakes the element centered, and the area beyond the container will be considered as overflow. Combined with this overflow-x: auto, the area on the right side beyond the container will be scrolled and displayed by the scroll bar, but the area on the left has been "cropped" and cannot be displayed.
solve
Since the element is hidden because the element is centered, it is not used on the prop-list container. overflow-x: auto;You can put another layer of container prop-container outside the prop-list container to implement it overflow-x: auto;as a container for the visual area, and the prop-list container is used as a container. When the container is scrolled, the child elements of the prop-container container are displayed from the left by default, so there will be no cropping problems caused by the playback of child elements.
- principle:
- accomplish
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.prop-container {
width: 500px;
overflow-x: auto;
margin: auto;
}
.prop-list {
min-width: 500px;
height: 100px;
background: rgba(167, 155, 180, 0.3);
border: 3px solid rgba(68, 203, 245, 0.3);
border-radius: 10px;
display: flex;
justify-content: space-around;
align-items: center;
}
.prop-item {
/* 需要设置下，要不然会强制压缩 */
min-width: 70px;
height: 70px;
margin: 0 10px;
background-color: lightcyan;
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 10px;
text-align: center;
line-height: 70px;
font-size: 20px;
font-weight: 900;
}
</style>
<body>
<div class="prop-container">
<div class="prop-list">
<div class="prop-item">1</div>
<div class="prop-item">2</div>
<div class="prop-item">3</div>
<div class="prop-item">4</div>
<div class="prop-item">5</div>
<div class="prop-item">6</div>
<div class="prop-item">7</div>
<div class="prop-item">8</div>
</div>
</div>
</body>
</html>
- Effect
Oops, it's still cropped. What is God’s reason for this? Because the prop-list container is set display: flex;, the default width of the container is the width of the parent element prop-container (in line with the default block attribute), and then the child element is set to be displayed in the center, so it will still be cropped.
- Solution:
Set the prop-list container.display: inline-flex;Then the prop-list container conforms to the inline-block attribute, and the width is expanded by the child elements.
Effect:
