Flexbox中Stories与Reels文本/区块粘连问题求助

制作Facebook网站克隆版时，实现Stories和Reels的flex容器时遇到问题：两者文本及区块相互粘连，无法分别居左和居右对齐，期望效果如下：

当前代码如下：

CSS代码 #

html,
body {
  height: 100vh;
  padding: 0;
  margin: 0;
  background-color: #f1f2f5;
}

/* header 样式 */

.header {
  display: flex;
  position: fixed;
  align-items: center;
  background-color: #fff;
  justify-content: space-between;
  flex-direction: row;
  padding-bottom: 10px;
  z-index: 1;
  height: 45px;
  padding: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  top: 0;
  left: 0;
  right: 0;
}

.leftHeader {
  width: 25%;
  display: flex;
  justify-content: left;
  align-items: left;
  flex-direction: row;
}

.logo {
  height: 50px;
  width: 75px;
}

.searchBar {
  background-color: #eff2f5;
  position: relative;
  padding: 15px;
  border-radius: 40px;
  display: flex;
  gap: 20px;
  margin-left: -10px;
  height: 10px;
}

.searchBtn {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.searchLogo {
  height: 30px;
  width: 50px;
}

.inputText {
  background-color: #eff2f5;
  outline: none;
  border: 0;
  width: 175px;
  height: 15px;
}

.centerHeader {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
}

.centerHeader i {
  font-size: 25px;
}

.rightHeader {
  width: 25%;
  display: flex;
  justify-content: right;
  align-items: right;
  flex-direction: row;
  gap: 20px;
}

.rightHeader i {
  font-size: 25px;
}

.profilePic img {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  object-fit: cover;
}

/* main 区域样式 */

.mainBar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 50%;
  margin: 50px auto 0;
}

.stories_Reels_Box {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  height: 300px;
  width: 75%;
  border-radius: 5px;
  background-color: white;
  margin-top: 30px;
  margin-bottom: 20px;
}

.upper_Box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30%;
  width: 100%;
  border-bottom: 2px solid black;
}

.stories {
  flex: 1;
  text-align: right;
  text-decoration: underline;
  text-decoration-color: blue;
}

.reels {
  flex: 1;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: blue;
}

.whats_On_Your_Mind {
  height: 300px;
  width: 75%;
  border-radius: 5px;
  background-color: white;
  margin-bottom: 20px;
}

.post_One {
  height: 300px;
  width: 75%;
  border-radius: 5px;
  background-color: white;
  margin-bottom: 20px;
}

.people_You_May_Know {
  height: 300px;
  width: 75%;
  border-radius: 5px;
  background-color: white;
  margin-bottom: 20px;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <script
      src="https://kit.fontawesome.com/a35cda4da8.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div class="header">
      <div class="leftHeader">
        <img class="logo" src="images/Facebook-logo.png" />
        <div class="searchBar">
          <img class="searchBtn" src="images/search-icon.webp" />
          <input type="text" class="inputText" placeholder="Search Facebook" />
        </div>
      </div>

      <div class="centerHeader">
        <div class="home">
          <i class="fa-solid fa-house" style="color: #000000"></i>
        </div>
        <div class="watch">
          <i class="fa-sharp fa-solid fa-tv" style="color: #000000"></i>
        </div>
        <div class="marketplace">
          <i class="fa-solid fa-shop" style="color: #000000"></i>
        </div>
        <div class="group">
          <i class="fa-solid fa-user-group" style="color: #000000"></i>
        </div>
      </div>
      <div class="rightHeader">
        <div class="menu">
          <i class="fa-solid fa-bars" style="color: #000000"></i>
        </div>

        <div class="message">
          <i class="fa-brands fa-facebook-messenger" style="color: #000000"></i>
        </div>

        <div class="notification">
          <i class="fa-solid fa-bell" style="color: #000000"></i>
        </div>

        <div class="profilePic">
          <img
            src="/images/ProgrammingIllustration.png"
            alt="profile_picture"
          />
        </div>
      </div>
    </div>

    <div class="mainBar">
      <div class="stories_Reels_Box">
        <div class="upper_Box">
          <div class="stories">Stories</div>
          <div class="reels">Reels</div>
        </div>
      </div>

      <div class="whats_On_Your_Mind"></div>
      <div class="post_One"></div>
      <div class="people_You_May_Know"></div>
    </div>

    <div class="leftSidebar"></div>

    <div class="rightBar"></div>
  </body>
</html>

问题核心是文本对齐方向设置错误，且缺少内边距导致区块粘连。修改.upper_Box、.stories和.reels的样式即可解决：

.upper_Box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30%;
  width: 100%;
  /* 替换深色边框为Facebook风格的浅灰边框 */
  border-bottom: 1px solid #e4e6eb;
  /* 添加左右内边距，避免贴边 */
  padding: 0 15px;
  box-sizing: border-box;
}

.stories {
  flex: 1;
  /* 修正为居左对齐 */
  text-align: left;
  text-decoration: underline;
  text-decoration-color: #1877f2;
  /* 添加内边距，扩大点击区域并避免粘连 */
  padding: 10px 0;
  cursor: pointer;
  font-weight: 600;
}

.reels {
  flex: 1;
  /* 修正为居右对齐 */
  text-align: right;
  text-decoration: underline;
  text-decoration-color: #1877f2;
  padding: 10px 0;
  cursor: pointer;
  font-weight: 600;
}

修改后效果：

• Stories文本居左，Reels文本居右，不再粘连
• 边框更贴近Facebook原生样式
• 增加内边距提升交互体验

内容的提问来源于stack exchange，提问作者LSJ32141