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

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>

标签： htmlcssflexbox

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>