HTML CSS Flex 调整

Question

我有这个 HTML 时间线，下面还有 CSS 我有一个 exp 容器，其显示设置为 Flex，方向设置为列。我希望最后两个 exp_items 以行方式而不是列方向出现。

.exp {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.line {
  width: 100%;
  height: 10px;
  background-color: lightgray;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 150px;
  margin-top: 50px;
  margin-bottom: 50px;
  border-radius: 10px;
}

.exp_item .description {
  width: 250px;
  height: 180px;
  background-color: transparent;
}

.exp_ball {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.exp_ball:nth-child(1) {
  background: url(resources/acesol.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.exp_ball:nth-child(2) {
  background: url(resources/wurfelbg.jpg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.exp_ball:nth-child(3) {
  background: url(resources/wurfelbg.jpg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.exp_item {
  width: 80%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 410px;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<nav>
  <div class="nav-container" id="nav-container">
    <div class="nav-item">
      <a href="index.html"></a>
      <div class="info">
        <p>Home</p>
      </div>
    </div>
    <div class="nav-item">
      <a href="education.html"></a>
      <div class="info">
        <p>Education</p>
      </div>
    </div>
    <div class="nav-item">
      <a href="expiriences.html"></a>
      <div class="info">
        <p>Expirience</p>
      </div>
    </div>
    <div class="nav-item">
      <a href="certifications.html"></a>
      <div class="info">
        <p>Certifications</p>
      </div>
    </div>
    <div class="nav-item">
      <a href="cv.html"></a>
      <div class="info">
        <p>Ciriculum Vitae</p>
      </div>
    </div>
  </div>
</nav>
<br>

<div class="name">
  <h1>Expiriences</h1>
</div>

<div class="main_content" id="main_content">
  <div class="exp">
    <div class="exp_item" id="exp_item">
      <div class="description description1">
        <h4>time 1</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident asperiores quis maiores, voluptas dolore, laborum quod exercitationem odit sint quo obcaecati facere repellat quia placeat maxime reiciendis officia corrupti iusto.</p>
      </div>
    </div>
    <div class="exp_item" id="exp_item">
      <div class="line">
        <div class="exp_ball"></div>
        <div class="exp_ball"></div>
        <div class="exp_ball"></div>
      </div>
    </div>
    <div class="exp_item" id="exp_item">
      <div class="description description2">
        <h4>time 2</h4>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit, at dolorem similique ab culpa modi inventore minima nemo officia dolore blanditiis ducimus veritatis itaque quae id est quia, dignissimos amet.</p>
      </div>
    </div>
    <div class="exp_item">
      <div class="description description3">
        <h4>time 3</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, voluptates ad! Voluptatibus beatae quam amet sed magni, assumenda ea, ut mollitia nihil ratione laudantium numquam culpa odit vitae temporibus rerum.</p>
      </div>
    </div>
  </div>
</div>

我也尝试过这个，但没有成功。我只是希望最后两项的 exp 显示是柔性的，方向设置为行而不是列

.exp_item:nth-last-child(-n+2) {
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

Answer 1

你好，我认为一个简单的解决方案是在 2 元素周围添加一个额外的 div。

<div class="row_this">
    <div class="exp_item" id="exp_item">
        <div class="description description2">
            <h4>time 2</h4>
            <p>Lorem ipsum dolor, sit amet </p>
        </div>
    </div>
    <div class="exp_item">
        <div class="description description3">
            <h4>time 3</h4>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
    </div>
<div>

还有一些 'row_this' 类的 css

.row_this {
    display: flex;
    flex-direction: row;
}