css 如何将第一个项目置于Flexbox滑块/转盘的中心

bhmjp9jg  于 2023-03-05  发布在  其他
关注(0)|答案(2)|浏览(167)

我想建立一个简单的滚动滑块与灵活框与三个项目。我希望第一个项目是居中的页面(标题下),但以下项目只应该有一个较小的利润。
超文本:

<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

rwqw0loc

rwqw0loc1#

.page-width {
  max-width: 500px;
  border: 5px solid green;

}

h1 {
  text-align: center;
}

.container {
  display: flex;
  justify-content: flex-start;
  overflow: scroll;  
  padding-left:20%;
}

.flex-item {
  margin-left: 20px;
}

.flex-wrapper {
  background: blue;
  width: 250px;
  height: 250px;
}
<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>
5us2dqdw

5us2dqdw2#

如果你从来没有得到一个答案或其他人想要同样的东西。你需要添加页边空白左到第一项

.flex-item:first-child {
  margin-left: calc( 50% - 125px );
}

50%将其推到一半,然后减去125px,即框的宽度除以2。
x一个一个一个一个x一个一个二个x

相关问题