css 为什么两个文本/div在我的flexbox中粘在一起？

h7wcgrx3 于 2023-05-23 发布在其他

关注(0)|答案(1)|浏览(196)

我目前正在Facebook网站克隆工作，我遇到了一个问题，我正在努力制作一个带有故事和卷轴部分的灵活框，但似乎这两个部分及其文本都粘在一起，而不是分别集中在右侧和左侧：
我想要的结果图片：

我目前的代码中的故事和卷轴粘在一起：

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

/* this part is for the 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;
}

/* This part is for the 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;
}

<!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>

css

来源：https://stackoverflow.com/questions/76302829/why-are-two-texts-divs-stuck-together-in-my-flexbox

1条答案

按热度按时间

yhived7q1#

我只是把flex放在.upper_Box类上，我还改变了类（.stories和.reels），让flex和文本居中对齐

.upper_Box {
    display: flex;
    width: 80%;
}

.stories, .reels {
    flex: 1;
    text-align: center;
}

赞(0）回复(0）举报 2023-05-23

我来回答

css 为什么两个文本/div在我的flexbox中粘在一起？

1条答案

相关问题

热门标签

最新问答