如何將 flexbox 滑塊/旋轉木馬中的第一項居中

Question

我想用三個項目構建一個簡單的滾動 slider 和 flexbox。 我希望第一個項目在頁面中居中（在標題下），但以下項目只應該有一個較小的邊距。

HTML：

<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%
}

並將包裝器居中，因此框將位於中心，但第二個和第三個項目位於屏幕之外。

代碼筆： https://codepen.io/ascena/pen/wvqZgzg

Answer 1

 .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>