Flex布局时间线调整：如何让最后两个.exp_item横向排列？

我用HTML和CSS实现了一个时间线布局，.exp容器设置为display: flex且flex-direction: column，所有.exp_item默认纵向排列。我希望将最后两个.exp_item改为横向（row）排列，但尝试以下CSS代码后并未生效：

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

原始HTML与CSS代码如下：

CSS代码 #

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

HTML代码 #

<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_item设置flex-direction: row，但每个.exp_item内部只有一个.description子元素，修改这个容器的排列方向不会产生任何视觉变化。你真正需要调整的是父容器.exp对最后两个.exp_item的排列方式，让它们在父容器里横向排列。

这里提供两种简单可行的方案：

方案一：通过Flex布局的换行与宽度控制实现 #

修改.exp容器的CSS，同时调整子元素的宽度分配：

.exp {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row; /* 将纵向排列改为横向 */
  flex-wrap: wrap; /* 允许子元素换行 */
}

/* 让前两个.exp_item占满整行，保持纵向排列的视觉效果 */
.exp_item:nth-child(-n+2) {
  width: 100%;
}

/* 让最后两个.exp_item各占50%宽度，实现横向排列 */
.exp_item:nth-last-child(-n+2) {
  width: 50%;
  /* 可以根据需求调整内部间距，比如缩小gap */
  gap: 20px;
}

方案二：用容器包裹最后两个元素（更直观） #

修改HTML结构，把最后两个.exp_item放到一个新的flex容器中：

<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_row_wrapper">
    <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>

然后添加这个新容器的CSS：

.exp_row_wrapper {
  display: flex;
  width: 80%;
  justify-content: space-evenly;
  align-items: center;
  gap: 20px; /* 根据需求调整间距 */
}

两种方案都能实现你要的效果，方案二更直观，适合需要明确区分布局区块的场景；方案一无需修改HTML结构，适合希望保持原有DOM结构的场景。

内容的提问来源于stack exchange，提问作者Muhammad Owais Khalid