所以我目前正在一个网站上工作，我在对齐标题中的flexbox项目（徽标和标题）时遇到问题。它们始终彼此对齐，我需要它们并排。
我阅读了stackoverflow中其他人的类似问题，并且还搜索了至少一分钟。 2小时。我不得不说了解了很多有关定位和flexbox的知识，但是我无法解决。
[我在网站上还没有真正关心的很多事情，但是现在它们并不重要，只是忽略它们：'D但是，如果您有一些提示，我仍然会非常感激，因为我是创建网站的新手：）
我的HTMl：
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>El Pastelazo</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<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>
</body>
</html>
我的CSS：
@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{
}
}
您想要这样的东西吗？
/*flex items*/
.head_titel_container{
border: 5px solid blue;
max-height: 22rem;
width: 50%;
min-width: 50%;
position: relative;
display: inline-block;
}
.flex_titel{
position: absolute;
left:800px;
top:-10px;
width: 78%;
box-sizing: content-box;
border: 5px solid black;
display: inline-block;
}
顺便说一下，有一个名为JSFiddle的网站，您可以在其中发布代码以进行快速演示。将来可能会有用。
默认情况下，[将display:flex样式添加到HTML元素中，除非明确添加justify-content: column，否则使其子元素并排显示。
[仔细查看您的html之后，我发现您已经将display:flex添加到了head_flex_container中，后者只有一个孩子，即head_titel_container。
您可以将display:flex属性添加到head_titel_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>
.head_titel_container {
display: flex;
}
将css文件中的display: flex样式添加到.head_titel_container应该使它们并排显示。
让我知道您是否对这种方法有任何疑问。