flex:boxen automatisch umbrechen + mittig ausrichten mit justify-content

wakeme · 29. November 2020

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

jackyjoy123 · 29. November 2020

Zitat von wakeme

I wanted to center a heading in the header. Is that also possible with justify-content: center; ?

Strangely, that's ignored.

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

In addition, I would like to represent several horizontally aligned boxes.

A maximum of three in a row, so that the rest automatically wraps to the next line. The only problem is that flex: 1; or other width specifications are ignored. Instead, all boxes are placed in a row regardless of flex-wrap: wrap. I found a workaround with a break that works so far. Is that correct or is there another solution? Why are the width specifications ignored?

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 base: 100%;
height: 0;
}

Alles anzeigen

thanks my issue has been fixed.

Sempervivum · 29. November 2020

Zu der ersten Frage rate ich mal: Dein HTML sieht so aus:

Code

    <header>
        <h1 class="header_title">Die Überschrift</h1>
    </header>

In dem Fall ist absolute Positionierung eine denkbar schlechte Lösung, nur um etwas zu zentrieren. Ein simples text-align: center; ist ausreichend.

wakeme · 29. November 2020

Nein so

</div></header>

Sempervivum · 29. November 2020

OK, aber erstens ändert das nichts, der Titel bzw. die Überschrift lässt sich mit text-align: center; problemlos zentrieren.

Und zweitens, wenn du schreibst, dass es sich um eine Überschrift handelt, ist es angebracht, dafür auch das entspr. Tag zu verwenden also <h1> <h2> ...

wakeme · 29. November 2020

Danke, das übernehme ich mit padding um es vertikal mittig auszurichten

Interessehalber warum funktioniert das justify-content nicht ? Was ist richtig zum zentrieren eines wrappers margin: 0 auto; oder justify-content: center; ?

MrMurphy · 29. November 2020

Das ist keine "entweder - oder" Frage. Für bestimmte Elemente gibt es entsprechende Möglichkeiten im CSS.

Texte werden mit text-align: center; zentriert.

justify-content ist halt für bestimmte Container gedacht und grade nicht für Texte. Deine Beispiele ohne Inhalt helfen nicht weiter um dir zu helfen. So kann ich nur vermuten dass dir die Grundlagen für ein korrektes HTML fehlen, die aber für die richtige Anwendung vom CSS Voraussetzung sind.

Sempervivum · 29. November 2020

Zitat

warum funktioniert das justify-content nicht ?

Bei mir funktioniert auch das einwandfrei.

wakeme · 29. November 2020

Dann konkreter. Die Frage war ja jetzt nicht spezifisch auf das obige bezogen. Ich zentriere den Hauptcontainer/Wrapper einer Seite immer mit margin: 0 auto;.

Ich wollte eigentlich nur wissen ob das in einem Flexlayout so zulässig ist. Das ist Alles.

Justify-content: center;&align-items: center; scheinen bei diesem Aufbau nicht zu funktionieren. Ist das überhaupt sinnvoll hierbei darauf zurückzugreifen ?

Code

<div id="wrapper">
<main>
<div class="news_box">
<div class="news_box_title"><h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h1></div>
<div class="news_box_content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<a href="#" class="button_1">---</a>
</div>

<div class="news_box">
<div class="news_box_title"><h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h1></div>
<div class="news_box_content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<a href="#" class="button_1">---</a>
</div>

<div class="news_box">
<div class="news_box_title"><h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h1></div>
<div class="news_box_content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<a href="#" class="button_1">---</a>
</div>
</main>
</div>

Alles anzeigen

Code

#wrapper {
min-height: 100vh;
}

.main {
max-width: 950px;
flex:1;
margin: 0 auto;
display: flex;
flex-direction: column;
}

.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;
}

Alles anzeigen

MrMurphy · 29. November 2020

Zitat

scheinen bei diesem Aufbau nicht zu funktionieren

Der Aufbau ist auch kein korrektes HTML. Das ist veraltet und zusätzlich auch nach den alten Regeln nicht regelgerecht.

Da du offensichtlich aktuelles CSS verwenden willst solltest du auch das dazu passende aktuelle HTML verwenden. Der Quelltext könnte dann so aussehen:

Code

   <main>
      <aside class="news">
         <section>
            <h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h1>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            <a href="#">---</a>
         </section>
         <section>
            <h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h1>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            <a href="#">---</a>
         </section>
         <section>
            <h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h1>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            <a href="#">---</a>
         </section>
      </aside>
   </main>

Alles anzeigen

wakeme · 29. November 2020

Hast du ein Beispiel ?

MrMurphy · 29. November 2020

Das Beispiel habe ich nach der Frage von wakeme eingefügt, da habe ich seine Frage nicht gesehen.

Die Flexanwendung in deinem Beispiel ist sinnfrei, da Blockelemente sowieso untereinander stehen. Bei CSS gilt das gleiche wie beim HTML: Unnötige Angaben sind nach den aktuellen HTML5- und CSS3-Regeln zu vermeiden.

wakeme · 29. November 2020

Dankeschön

wakeme · 30. November 2020

Ich habe mich bei selfhtml eingelesen und mein derzeitiges Projekt überarbeitet.

Wenn irgendwas unsauber ist wäre es schön, wenn man mich darauf hinweist damit ich daraus lernen kann.

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<title>pp</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" media="all" type="text/css">
<script src="js/menu.js" defer></script>
</head>
<body>
<nav class="navbar">
<div class="brand-title">pp</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li><a href="#">item</a><li>
<li><a href="#">item</a><li>
<li><a href="#">item</a><li>
<li><a href="#">item</a><li>
</ul>
</div>
</nav>
<header>
<h1 class="header_title">p&nbsp;blog</h1>
</header>
<main>
<section class="news">
<h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<a class="button_1" href="#">---</a>
</section>
<section class="news">
<h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<a class="button_1" href="#">---</a>
</section>
<section class="news">
<h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<a class="button_1" href="#">---</a>
</section>
</main>
<footer>
</footer>
</body>
</html>

Alles anzeigen

Code

@import url('https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&display=swap');

* {
box-sizing: border-box;
padding: 0;
margin: 0;
}

body {
background-color: #fafafa;
font: 13px/1.65em "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
color: #444;
display: flex;
flex-direction: column;
min-height: 100vh;
}

header footer {
flex: none;
}

header {
background-image: url(images/background.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 250px;
opacity: 0.85;
}

.header_title {
font-family: 'Covered By Your Grace', cursive;
line-height: 1.65em;
font-size: 3.125rem;
color: #ffffff;
text-align: center;
padding: 4.813rem;
}

main {
margin: 0 auto;
max-width: 950px;
flex: 1;
}

.news {
margin-top: 50px;
padding: 10px;
background-color: #ffffff;
border: 1px solid #f0f0f0;
border-radius: 2px;
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;
}

aside {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.box {
flex-basis: 35%;
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;
}

footer {
margin-top: 100px;
background-color: #1a1a1a;
}


/*nav*/

.navbar {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
background-color: #ffffff;
color: #444;
}

.brand-title {
font-size: 1.5rem;
margin: .7rem;
font-family: 'Covered By Your Grace', cursive;
}

.navbar-links {
height: 100%;
}

.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}

.navbar-links li {
list-style: none;
}

.navbar-links li a {
display: block;
text-decoration: none;
padding: 1rem;
font-size: 1.125rem;
font-family: 'Covered By Your Grace', cursive;
color: #444;
}

.navbar-links a:hover {
background-color: #1a1a1a;
color: #ffffff;
}

.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}

.toggle-button .bar {
height: 3px;
width: 100%;
background-color: #444;
}

/*nav*/



/*responsive Elemente*/

@media only screen and (max-width: 800px) {
main {
margin-right: 20px;
margin-left: 20px;
margin-top: 10px;
margin-bottom: 10px;
}

.news {
margin-top: 20px;
}

.navbar {
flex-direction: column;
align-items: flex-start;
}

.toggle-button {
display: flex;
}

.navbar-links {
display: none;
width: 100%;
}

.navbar-links ul {
width: 100%;
flex-direction: column;
}

.navbar-links ul li {
text-align: center;
}

.navbar-links ul li a {
padding: .5rem 1rem;
}

.navbar-links.active {
display: flex;
}


}

/*responsive Elemente*/



/*Schriften,Überschriften&Links*/
h1 {
font: 18px/1.65em "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
color: #444;
margin: 10px;
}

a {
font: 13px/1.65em "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
color: #444;
text-decoration: none;
}

/*Schriften,Überschriften&Links*/

Alles anzeigen

Das zweite Problem ist weiterhin vorhanden. Diese zweite Datei ist eine Unterseite. Ich möchte, dass drei Boxen die volle Breite von main ausnutzen und der Rest in die zweite Zeile umbricht. Das funktioniert nicht so richtig.

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<title>pp</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" media="all" type="text/css">
<script src="js/menu.js" defer></script>
</head>
<body>
<nav class="navbar">
<div class="brand-title">pp</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li><a href="#">item</a><li>
<li><a href="#">ite</a><li>
<li><a href="#">item</a><li>
<li><a href="#">item</a><li>
</ul>
</div>
</nav>
<header>
<h1 class="header_title">pathos&nbsp;blog</h1>
</header>
<main>
<aside>
<section class="box"></section>
<section class="box"></section>
<section class="box"></section>
<div class="break"></div>
<section class="box"></section>
<section class="box"></section>
<section class="box"></section>
<div class="break"></div>
<section class="box"></section>
<section class="box"></section>
<section class="box"></section>
</aside>
</main>
<footer>
</footer>
</body>
</html>

Alles anzeigen

Sempervivum · 30. November 2020

Zitat

Ich möchte, dass drei Boxen die volle Breite von main ausnutzen und der Rest in die zweite Zeile umbricht.

Einfacher als mit Umbrüchen erreichst Du das mit Gridlayout:

Code

aside {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

Die Hilfselemente für die Umbrüche musst Du dann natürlich heraus nehmen. Und flex-basis für .box ist dann überflüssig.

Und den main-Container auf volle Breite setzen:

Code

main {
    margin: 0 auto;
    max-width: 950px;
    flex: 1;
    width: 100%;
}

Ich glaube, früher hattest Du geschrieben, dass die Elemente auf maximal drei Spalten verteilt werden sollen. Das kannst Du leicht mit Mediaqueries umschalten, so dass es bei schmalem Browserfenster weniger Spalten werden.

Sempervivum · 30. November 2020

PS: Ich habe noch einen Blick auf die Navigation geworfen:

IMO ist der Container div.lavbar-links überflüssig, Du hast ja schon das <ul>
Was hast Du denn mit den leeren <li> vor?

wakeme · 30. November 2020

Kann ich Grid&Flex beliebig kombinieren ?

Und bei den Media queries main auf width: auto; und grid-template-columns: 1fr; damit auf dem mobilen Gerät nur eine Box erscheint ?

Was sagst du zum restlichem Code ?

html-seminar.de/woltlab/attachment/2678/

Es kommen drei Fehlermeldungen auf welche ich nicht nachvollziehen kann.

Sempervivum · 30. November 2020

Zitat

Kann ich Grid&Flex beliebig kombinieren ?

Ja, wenn ein Layout etwas komplexer ist mit mehreren Container kann der Fall eintreten, dass für einen Flex und für den anderen Grid besser geeignet ist, um das gewünschte Layout zu erzielen.

Sempervivum · 30. November 2020

PS: Ich sehe gerade, was die "leeren" li-Tags betrifft, hatte ich mich von der Anzeige des HTML-Inspektors täuschen lassen. Es gibt keine leeren sondern bei den schließenden </li> hattest Du den Schrägstrich vergessen.

wakeme · 30. November 2020

Danke, das ist mir nicht aufgefallen

flex:boxen automatisch umbrechen + mittig ausrichten mit justify-content

Jetzt mitmachen!

Teilen