当屏幕尺寸减小时，如何使最左侧的弹性项目保持固定在屏幕上，而其他弹性项目向右移动并向右溢出？

Question

我正在创建一个响应式首页，其中包含随页面调整大小的文章。我有一个 div 'flex-container' 将包含 3 或 4 篇文章，也许更多。如果页面变大，文章就会散开，如果页面变小，它们会被挤在一起并略微重叠，用户可以向右滚动以在屏幕上查看文章。

我希望 'flex-continainer' div 的左侧保持固定在屏幕的左侧，并且只有右侧从屏幕的右侧流出，所以第一篇文章是始终可见，用户必须向右滚动才能看到其余部分。我很难做到这一点并使滚动条正确显示。随着屏幕尺寸的缩小，'flex-container' div 的中心保持在屏幕的中心，并且文章从屏幕的左侧和右侧溢出。所以第一篇文章的左边是不可见的。

.flex-container {
  display: flex;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: space-evenly;
  background-color: grey;
  overflow-x: scroll;
}

.article {
  display: flex;
  width: 30%;
  min-width: 200px;
  max-width: 400px;
  height: 50%;
  padding: 20px;
  margin-left: -30px;
  border: solid 4px white;
  border-radius: 16px;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.8), rgb(77, 74, 74));
  box-shadow: -10px 0px 10px 10px rgba(0, 0, 0, 0.3);
}

.article:hover {
  z-index: 1;
}

h2 {
  font-size: 2.5vw;
}

<div class="flex-container">
  <div class="article">
    <h2>Heading 1</h2>
  </div>
  <div class="article">
    <h2>Heading 2</h2>
  </div>
  <div class="article">
    <h2>Heading 3</h2>
  </div>
</div>

Answer 1

我认为如果将第一篇文章的margin-right 设置为0 并省略容器的justify-content，您将获得所需的结果。

工作示例：

.flex-container {
  display: flex;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  align-items: center;
  background-color: grey;
  overflow-x: scroll;
}

.article {
  display: flex;
  width: 30%;
  min-width: 200px;
  max-width: 400px;
  height: 50%;
  padding: 20px;
  margin-left: -30px;
  border: solid 4px white;
  border-radius: 16px;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.8), rgb(77, 74, 74));
  box-shadow: -10px 0px 10px 10px rgba(0, 0, 0, 0.3);
}

.article:first-child {
  margin-left: 0;
}

.article:hover {
  z-index: 1;
}

h2 {
  font-size: 2.5vw;
}

<div class="flex-container">
  <div class="article">
    <h2>Heading 1</h2>
  </div>
  <div class="article">
    <h2>Heading 2</h2>
  </div>
  <div class="article">
    <h2>Heading 3</h2>
  </div>
</div>

Answer 2

你可以先尝试使article修复：

.flex-container {
  display: flex;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: end;
  background-color: grey;
  overflow-x: scroll;
}

.article {
  display: flex;
  width: 30%;
  min-width: 200px;
  max-width: 400px;
  height: 50%;
  padding: 20px;
  margin-left: -30px;
  border: solid 4px white;
  border-radius: 16px;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.8), rgb(77, 74, 74));
  box-shadow: -10px 0px 10px 10px rgba(0, 0, 0, 0.3);
  z-index: 0;
}

.article:hover {
  z-index: 1;
}
.article:first-child {
  position: fixed;
  left: 50px;
  z-index: 0;
}
.article:first-child:hover {
  z-index: 1;
}
h2 {
  font-size: 2.5vw;
}

<div class="flex-container">
  <div class="article">
    <h2>Heading 1</h2>
  </div>
  <div class="article">
    <h2>Heading 2</h2>
  </div>
  <div class="article">
    <h2>Heading 3</h2>
  </div>
</div>

Answer 3

感谢 nikola pavicevia 和 biberman。您的回答对我来说不太有效，但帮助我找到了解决方案。可以通过将 justify-content 设置为 flex-start 并将 flex 容器上的 padding left 设置为 50px 并将margin-right 设置为文章上的 auto 来实现所需的行为。

.flex-container{
    display: flex;
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    padding-left:50px;
    align-items: center;
    justify-content:flex-start;
    background-color: grey;
    overflow-x: scroll;
}

.article{
    display: flex;
    width: 30%;
    min-width: 200px;
    max-width: 400px;
    height: 50%;
    padding: 20px;
    margin-left: -30px;
    margin-right:auto;
    border: solid 4px white;
    border-radius: 16px;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.8), rgb(77, 74, 74));
    box-shadow: -10px 0px 10px 10px rgba(0, 0, 0, 0.3);
    z-index: 0;
}

.article:hover{
    z-index: 1;
}

h2{
    font-size: 2.5vw;
}

<div class="flex-container">
    <div class="article">
        <h2>Heading 1</h2>
    </div>
    <div class="article">
        <h2>Heading 2</h2>
    </div>
    <div class="article">
        <h2>Heading 3</h2>
    </div>
</div>