css - 并排对齐 flexbox 元素(对齐问题)

Question

所以我目前正在一个网站上工作，但我在对齐页眉中的 flexbox 元素( Logo 和标题)时遇到了问题。它们总是在彼此下方对齐，我需要它们并排放置。

我通读了 stackoverflow 中其他人的类似问题，我也用谷歌搜索了 min。 2小时。 我不得不说学到了很多关于定位和 flexbox 的东西，但我无法解决它。

网站上还有很多我还没有真正关心的东西，但现在它们并不重要，忽略它们 :'D 但是，如果您有一些提示，我仍然会非常感激，因为我是创建网站的新手:)

@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css?family=Sniglet');
@import url('https://fonts.googleapis.com/css?family=Dosis&display=swap');
@import url('https://fonts.googleapis.com/css?family=Dancing+Script');

/*all*/

html,
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
  font-family: 'Dosis', sans-serif;
  /*, cursive |zum kursiv*/
}


/*For PC's*/

@media screen and (min-width: 950px) {
  .wrapper {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto;
    /*NOT sur about the auto*/
    grid-template-areas: "header" "main" "footer";
    background-color: #ffc5c9;
  }
  /*Nav Menu*/
  .navigation_wrapper {
    position: relative;
  }
  .navigation_button {
    will-change: transform;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    position: fixed;
    z-index: 1;
    top: 40px;
    left: 100px;
    background: transparent;
    cursor: pointer;
  }
  .navigation_button .fa {
    border: 2px solid white;
    border-radius: 3px;
    padding: 10px;
    color: white;
  }
  .navigation_menu ul li {
    list-style: none;
    font-weight: 250;
    color: #79E2DD;
    /*font-family: impact; könnte hier noch geändert werden*/
  }
  .navigation_menu {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    width: 50%;
    background: white;
    height: 100%;
    transform: skewX(0deg) translate(100%, 0);
    transform-origin: top right;
    transition: all .2s ease-in;
    z-index: -1;
  }
  .navigation_menu ul {
    transform: skewX(-8deg);
    transform-origin: top left;
    position: fixed;
    left: 100px;
    top: 100px;
    width: 400px;
    text-align: left;
  }
  .navigation_menu ul li {
    position: relative;
    z-index: 999;
    font-size: 32px;
    color: #F4E1A6;
    line-height: 64px;
  }
  .navigation_menu ul li a {
    border: none;
    color: #FFC59;
    text-decoration: none;
  }
  .navigation_menu.active {
    transform: skewX(8deg) translate(0, 0);
  }
  .navigation_menu li {
    opacity: 0;
    transform: translate(0, 10px);
    transition: all .0s ease-in .3s;
  }
  .navigation_menu.active li {
    opacity: 1;
    transform: translate(0, 0);
    transition: all 0.2s ease-in 0s;
  }
  .navigation_menu.active li:nth-child(1) {
    transition-delay: .3s;
  }
  .navigation_menu.active li:nth-child(2) {
    transition-delay: .4s;
  }
  .navigation_menu.active li:nth-child(3) {
    transition-delay: .5s;
  }
  .navigation_menu.active li:nth-child(4) {
    transition-delay: .6s;
  }
  .navigation_menu.active li:nth-child(5) {
    transition-delay: .7s;
  }
  .navigation_menu.active li:nth-child(6) {
    transition-delay: .8s;
  }
  /*Scrollbar*/
  /*Skeleton*/
  .head_wrapper {
    grid-area: header;
    height: auto;
    padding: 3rem 5rem 3rem;
    background-image: url("../pictures/TP4.jpeg");
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 0 0 50px 50px;
  }
  .main_wrapper {
    grid-area: main;
    margin: 2rem;
    padding: 20px;
    min-height: 100%;
    background-color: #feeee6;
    border-radius: 50px;
  }
  .foot_wrapper {
    background-color: #f4e1a6;
    grid-area: footer;
    border-radius: 50px 50px 0 0;
  }
  /*for Sticky Footer*/
  .foot_wrapper,
  .push {
    height: 15rem;
  }
  /*flex containers*/
  .head_flex_container {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    flex-wrap: wrap;
  }
  /*flex items*/
  .head_titel_container {
    border: 5px solid blue;
    max-height: 22rem;
    min-width: 100%;
    position: relative;
  }
  .flex_titel {
    position: absolute;
    right: 0;
    width: 78%;
    box-sizing: content-box;
    border: 5px solid black;
  }
  .flex_logo {
    width: 22%;
    box-sizing: border-box;
    border: 5px solid pink;
  }
  /*Titles*/
  h1 {}
  h2 {}
  /*Texts*/
  .index {}
  /*classes*/
  /*ID's*/
  #logo {
    height: auto;
    min-width: 5rem;
    max-width: 20rem;
    border-radius: 100%;
    box-sizing: border-box;
  }
  #pb1 {}
  /*Decoration*/
  hr {}
}

<div class="wrapper">
  <div class="scroll_wrapper">
    <div class="scrollbar" id="style-default">
      <div class="force-overflow"></div>
    </div>
    <div class="navigation_wrapper">
      <div class="navigation_button">
        <i class="fa fa-bars"></i>
      </div>
      <div class="navigation_menu">
        <ul>
          <li><a href="hier link rein">Home</a></li>
          <li><a href="hier link rein">Gallerie</a></li>
          <li>
            <a href="hier link rein"></a>Kontakt</li>
          <li>
            <a class="active" href="hier link rein"></a>
          </li>
          <li>
            <a class="active" href="hier link rein"></a>
          </li>
        </ul>
      </div>
    </div>
    <header>
      <div class="head_wrapper">
        <div class="head_flex_container">
          <div class="head_titel_container">
            <div class="flex_logo"><img src="pictures/Logo.jpeg" alt="Logo" title="El Pastelazo" id="logo"></div>
            <div class="flex_titel">
              <h1>El Pastelazo</h1>
            </div>
          </div>
        </div>
      </div>
    </header>
    <main class="main">
      <div class="main_wrapper">
        <div class="home_picture"><img src="pictures/PI.jpg" alt="Picture" title="Loah" id="pb1"></div>
        <div class="pagetitle">
          <h2>Home</h2>
        </div>
        <p class="index">
          <h3>Wilkommen!</h2>
            <hr class="hr_01"> hier kann loah sich und ihre arbeit bzw was Sie auf dieser Website macht eintragen. Damit dieser Text hier möglichst lang ist werde ich einfach irgend ein Scheiss labern. Eigentlich will ich ihn auch nicht wirklich möglichst lang machen sondern
            nur so lang, wie auch ungefähr eine Vorstellung bzw Beschreibung sein würde. Ich würde mal sagen, diese länge an Text sollte genügen.
        </p>
        <div class="push"></div>
      </div>
    </main>
    <footer>
      <div class="foot_wrapper">
        <a class="foot_item" href="https://www.instagram.com/el_pastelazo_/?hl=de" title="@el_pastelazo_"><i class="fab fa-instagram"></i></a>
        <a class="foot_item" href="https://github.com/" title="Probably Insta"><i class="fa fa-github"></i></a>
        <a class="foot_item" href="https://www.pinterest.de/" title="Pinterest"><i class="fa fa-pinterest-p"></i></a>
        <a class="foot_item" href="https://www.gmx.ch/" title="Mail"><i class="fa fa-envelope-o"></i></a>
      </div>
    </footer>
  </div>

Answer 1

默认情况下向 HTML 元素添加 display:flex 样式会使其子元素并排显示，除非您显式添加 flex-direction: column;。

仔细查看您的 html 后，我发现您已将 display:flex 添加到 head_flex_container，它只有一个 child ，即 head_titel_container。

您可以将 display:flex 属性添加到 head_titel_container，因为它有两个需要并排显示的 child 。

<div class="head_titel_container">
     <div class="flex_logo"><img src="pictures/Logo.jpeg" alt="Logo" title="El Pastelazo" id="logo"></div>
     <div class="flex_titel"><h1>El Pastelazo</h1></div>
</div>

.head_titel_container {
  display: flex;
}

在您的 css 文件中将 display: flex 样式添加到 .head_titel_container 应该使它们并排显示。

如果您对这种方法有任何问题，请告诉我。