我想建立一个简单的滚动滑块与灵活框与三个项目。我希望第一个项目是居中的页面(标题下),但以下项目只应该有一个较小的利润。
超文本:
<div class="page-width">
<h1>Headline</h1>
<div class="container">
<div class="flex-item">
<div class="flex-wrapper">
Center me
</div>
</div>
<div class="flex-item">
<div class="flex-wrapper">
Hello World
</div>
</div>
<div class="flex-item">
<div class="flex-wrapper">
Hello World
</div>
</div>
</div>
</div>
CSS:
.page-width {
max-width: 500px;
border: 5px solid green;
}
h1 {
text-align: center;
}
.container {
display: flex;
justify-content: flex-start;
overflow: scroll;
}
.flex-item {
margin-left: 20px;
}
.flex-wrapper {
background: blue;
width: 250px;
height: 250px;
}
我怎样才能实现第一个项目居中,而第二个和第三个只保留20px的边距?此外,它应该是响应,例如当页面宽度较小时,第一个项目仍然应该居中。
我试着用
.flex-item {
flex: 0 0 100%
}
并将 Package 纸居中,这样盒子就会在中心,但随后第二和第三个项目就在屏幕之外了。
代码编号:https://codepen.io/ascena/pen/wvqZgzg
2条答案
按热度按时间rwqw0loc1#
5us2dqdw2#
如果你从来没有得到一个答案或其他人想要同样的东西。你需要添加页边空白左到第一项
50%将其推到一半,然后减去125px,即框的宽度除以2。
x一个一个一个一个x一个一个二个x