Ich wollte einen Überschrift in dem Header zentrieren. Geht das auch mit justify-content: center; ?
Komischerweise wird das ignoriert.
Code
header {
background-image: url(images/background.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
opacity: 0.85;
position: relative;
}
.header_title {
position: absolute;
top: 50%;
left: 50%;
right: auto;
bottom: auto;
transform: translateX(-50%) translateY(-50%);
font-family: 'Covered By Your Grace', cursive;
line-height: 1.65em;
font-size: 3.125rem;
color: #ffffff;
text-align: center;
}
Alles anzeigen
Code
header {
background-image: url(images/background.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
opacity: 0.85;
display: flex;
}
.header_title {
justify-content: center;
align-items: center;
font-family: 'Covered By Your Grace', cursive;
line-height: 1.65em;
font-size: 3.125rem;
color: #ffffff;
text-align: center;
}
Alles anzeigen
Darüber hinaus möchte ich möchte ich mehrere horizontale ausgerichtete Boxen darstellen.
Maximal drei in einer Reihe, sodass der Rest automatisch in die nächste Zeile umbricht. Das Problem ist nur, dass flex: 1; oder auch andere Breitenangaben ignoriert werden. Stattdessen werden alle Boxen in einer Reihe platziert unabhängig von flex-wrap: wrap. Ich habe einen Workaround mit einen Break gefunden, welcher soweit funktioniert. Ist das so korrekt oder gibt es eine andere Lösung ? Warum werden die Breitenangaben ignoriert ?
Code
<div id="footer_wrapper">
<main class="main2">
<div class="rowbox"></div>
<div class="rowbox"></div>
<div class="rowbox"></div>
<div class="break"></div> <!-- break -->
<div class="rowbox"></div>
<div class="rowbox"></div>
<div class="rowbox"></div>
<div class="break"></div> <!-- break -->
<div class="rowbox"></div>
<div class="rowbox"></div>
<div class="rowbox"></div>
</main>
</div>
#footer_wrapper {
min-height: 100vh;
}
.main {
max-width: 950px;
margin: 0 auto;
flex: 1;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.news_box {
margin-top: 50px;
padding: 10px;
background-color: #ffffff;
border: 1px solid #f0f0f0;
border-radius: 2px;
}
.news_box_title {
margin: 10px;
text-align: center;
}
.news_box_content {
text-align: center;
}
.button_1 {
display: block;
margin: 10px;
padding: 10px;
border: 1px solid #f0f0f0;
border-radius: 2px;
letter-spacing: 4px;
text-align: center;
text-decoration: none;
}
.button_1:hover {
background-color: #fafafa;
}
.rowbox {
flex: 1;
margin-top: 50px;
margin-left: 10px;
margin-right: 10px;
background-color: #ffffff;
border: 1px solid #f0f0f0;
padding: 15px;
border-radius: 3px;
}
.break {
flex-basis: 100%;
height: 0;
}
Alles anzeigen