时间戳

首页 > 解决方案 > CSS Flexbox：在较小的屏幕上重叠弹性项目的问题

css - CSS Flexbox：在较小的屏幕上重叠弹性项目的问题

问题描述

我使用 flexbox 创建了我的自定义时间线，但我遇到了较小屏幕的问题。当您开始拉伸窗口时，弹性项目开始重叠。您能否帮我添加一些空间但不要打破边界（这是创建时间线）？

:root{
  --image-url: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2070&q=80";
}

*,
*::before,
*::after{
  margin : 0;
  padding: 0;
  box-sizing: inherit;
}

body{
  box-sizing: content-box;
  font-size: 62.5%;
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-family: 'Zen Kaku Gothic New', sans-serif;
}

.container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height : 100vh;
  background-image: 
    linear-gradient(
      to right top,
      rgba(13, 13, 13, .75),
      rgba(13, 13, 13, 1)
    ),
    url("https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2070&q=80");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.timeline-row{
  font-size: 1.2rem;
  display: flex;
  min-width: 25%;
  min-height: 5rem; 
  color: #fff;
}

.timeline-item{
  flex:1;
  display: flex;
  align-items: center;

  &--date{
    border-right: 1px solid currentColor;
    justify-content: flex-end;
  }
  
  &--content{
    border-left: 1px solid currentColor;
    position: relative;
    justify-content: center;
    
    &::before{
      content: "";
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
      background-color:currentColor;
      position: absolute;
      top: 50%;
      left: -.55rem;
      transform: translateY(-50%);
    }
  }
}

.row-content{
  margin: .5rem 2rem;
  padding: .75rem;
  background-color: rgba(67, 85, 115, .35);
  border-radius: 15px;
}
<link href="https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@300&family=Zen+Kaku+Gothic+New:wght@300;400;500&display=swap" rel="stylesheet">

<div class="container">
  <div class="timeline-row">
    <div class="timeline-item timeline-item--date">
      <div class="row-content">2019</div>
    </div>
    <div class="timeline-item timeline-item--content">
      <div class="row-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel posuere magna. Morbi molestie odio eget quam rutrum, non volutpat dolor pharetra. Aliquam pretium condimentum est eu fermentum. Nulla dapibus tellus in leo aliquet aliquet. Vestibulum tempor est in.</div>
    </div>
  </div>
    <div class="timeline-row">
    <div class="timeline-item timeline-item--date">
      <div class="row-content">2020</div>
    </div>
    <div class="timeline-item timeline-item--content">
      <div class="row-content">Quisque ut justo est. Donec pulvinar viverra neque a cursus. Etiam a nunc sed dui posuere facilisis. Phasellus ut est rutrum, dignissim lorem ac, maximus mauris. Phasellus consequat lorem non urna luctus, in efficitur justo sagittis. Fusce iaculis congue rutrum. Sed vehicula.</div>
    </div>
  </div>
    <div class="timeline-row">
    <div class="timeline-item timeline-item--date">
      <div class="row-content">2021</div>
    </div>
    <div class="timeline-item timeline-item--content">
      <div class="row-content">Nunc et volutpat felis, ac rutrum turpis. Nullam id sollicitudin eros. Mauris dictum nibh in lorem pharetra, id feugiat tortor tempus. Integer gravida erat nec odio lobortis fringilla. Duis at auctor tortor, eget consectetur risus. Vivamus sit amet hendrerit metus, at rutrum magna.</div>
    </div>
  </div>
</div>

标签： cssflexboxoverlaptimeline

解决方案

您已将 flex 容器的高度设置为 100vh。flexbox 只是按照您的要求进行操作，将所有内容压缩到一个窗口中。

只需height: 100vh;从.container

推荐阅读