Zur Flexbox weitere Intems bzw Boxen hinzufügen

Emess · 17. Januar 2024

Ich habe ja in meiner Welcome Section schon ein Item Welches schon Kinder in form von HTML -Tags hat.

Jetzt möchte ich gerre 3 weitere Boxen bzw. Items hinzufügen. um etwas Text unterzubringen. Dazu habe ich erstmal 3 div's genommen. Aber das ist wohl eher oldschool.

Ein item soll links eines Rechts und das dritte mittig unter beiden. Kann mir gerade nicht vorstellen wie das gehen soll wenn ich nicht den Bierdeckel zerschiessen will

HTML

<section id="welcome">
<img src="images/logo.png">

<h1>welcome</h1>

<div>1</div>
<div>2</div>
<div>3</div>

    </section>

CSS

#welcome{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 360px;
  height: 50vh;
  /* background-color: #b1d4e0; */
  background-image: url(/images/beer2.jpg);
}



#welcome>img{
  width: 15%;
  margin: -125px;
}

#welcome>h1{
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: blue;
  margin-top: 120px;
}

@media only screen and (max-width: 767px) {
#welcome {
  height: 50vh;
  margin-top: 320px;
}
#welcome>h1{
  margin-top: 80px;
}

  #welcome>img{
    width: 25%;
    margin: -65px;
  }
}

Alles anzeigen

miflo.de

Sempervivum · 17. Januar 2024

Das ist genau die gleiche Situation wie in deinem vorigen Thread mit dem Footer, nur dass Du oben nicht drei sondern nur zwei Items hast. Versuche es mit dem Muster. Alles wird unter dem h1 angeordnet und ich erwarte keine Probleme mit dem Bierdeckel.

Was den Bierdeckel betrifft, beobachte ich, dass sich dieser unschön verschiebt, wenn das Browserfenster schmaler wird. Mein Vorschlag: Alles was damit zusammen hängt, von der Breite des Browserfensters abhängig machen, d. h. vw-Einheiten verwenden bei Größe, Position und margin-top des Elementes darunter. Und ab einer bestimmten Breite die Breite des Bierdeckels konstant lassen, damit er nicht riesengroß wird.

Emess · 17. Januar 2024

Ok da schau ich mal. Danke

Emess · 17. Januar 2024

Ich habe es fast erwartet. Dass nämlich die id="welcome" schon als Flex definiert ist gibt es die Eigenschaften

flex-direction: column;

an alle kinder weiter.

Eigentlich sollte ich das verstehen. Aber gerade steh ich mal wieder auf dem Schlauch

div.jpeg

CSS

#welcome{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 18.75vw;
  height: 50vh;
  /* background-color: #b1d4e0; */
  background-image: url(/images/beer2.jpg);
}

#welcome>img{
  width: 13.8vw;
  margin: -7vw;
}

#welcome>h1{
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: blue;
  margin-top: 7vw;
}

#welcome .flex-items{
  background-color: dimgray;
  padding-top: 0.3vw;
  width: 50vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
 
}


#welcome .flex-items > div{
  background-color: dimgray;
  margin: 0.3vw;
  text-align: center;
  font-size: 18px;
  flex: 1;
 
}


@media only screen and (max-width: 767px) {
#welcome {
  height: 50vh;
  margin-top: 42vw;
}
#welcome>h1{
  margin-top: 80px;
}

  #welcome>img{
    width: 25%;
    margin: -12vw;
  }
}

Alles anzeigen

Sempervivum · 17. Januar 2024

Poste doch auch mal das HTML dazu oder lade den aktuellen Stand wieder auf miflo.de hoch.

MrMurphy · 17. Januar 2024

Zitat

gibt es die Eigenschaften ... an alle kinder weiter.

Nein. Weder bei Flexbox noch bei CSS-Grid wird etwas vererbt. Es werden nur die CSS-Anweisungen ausgeführt, die du selbst angegeben hast.

Emess · 17. Januar 2024

@Mr. Murphy. das ist eine wichtige Info für mich. Aber der Schlauch ist immer noch verstopft.

Sempervivum

bitte schön

HTML

<section id="welcome">
<img src="images/logo.png">

<h1>welcome</h1>

<div class="flex-items">1</div>
<div class="flex-items">2</div>
<div class="flex-items">3</div>

Sempervivum · 17. Januar 2024

Da sieht man dann sofort, wo es hakt: Du willst ja die Items 1 und 2 nebeneinander anordnen. Dafür brauchst Du, wenn Du es mit Flex erledigen willst, einen Container drum herum, also so:

Code

<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
</div>
<div class="flex-items">3</div>

Die Klasse "flex-items" für einen Flex-Container ist zwar nicht falsch, lädt aber zu Missverständnissen ein weil man meistens "flex-item" eben für ein Item verwendet. Daher war ich so frei, die Klassen anders zu definieren.

Mit diesem:

Code

/* #welcome .flex-items{ */
#welcome .flex-container {
  background-color: dimgray;
  padding-top: 0.3vw;
  width: 50vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
 
}

Alles anzeigen

und dem "flex-direction:row" darin warst Du schon auf dem richtigen Wege.

Natürlich kann man diese Anordnung auch mit Grid machen aber es nimmt sich nicht viel. Außerdem entfernt man sich mit jedem Spanning von der Semantik eines Grid.

Emess · 17. Januar 2024

Damit ich die div's einzeln ausrichten kann. Dann wäre mein Gedanke für jedes Div eine eigene Klasse anzulegen und das dritte bräuchte bei mir eine eigene row. D.H. doch: Das dritte div muss ebenfalls mit eigener Klasse angesprochen werden.

Ich hoffe das ist nicht zu verwirrend ausgedrückt?

DIV1 DIV2

ooooooooooooooooooDIV3

So soll es ja aussehen

m.scatello · 17. Januar 2024

Siehe https://www.w3schools.com/cssref/sel_nth-child.php

Emess · 17. Januar 2024

Zitat von m.scatello

Siehe https://www.w3schools.com/cssref/sel_nth-child.php

Ich glaube ich hab das sogar schon benutzt. Ich schau mal in meinen bescheidenen Notizen nach.

Schauen ob ich da was ableiten kann?

Sempervivum · 17. Januar 2024

Zitat

Das dritte div muss ebenfalls mit eigener Klasse angesprochen werden.

Für die Anordnung, die Du haben willst, erst Mal nicht denn der Browser stapelt die Elemente übereinander. Sondern nur, wenn Du z. B. eine Höhe angeben willst, eine Farbe und/oder.

tk1234 · 17. Januar 2024

Zitat von Emess

Ein item soll links eines Rechts und das dritte mittig unter beiden. Kann mir gerade nicht vorstellen wie das gehen soll wenn ich nicht den Bierdeckel zerschiessen will

Nicht mit flex, versuch es mal mit grid: grid-template-areas ist dein Freund. Damit kannst du benannte Bereiche erzeugen (in der Mitte drei mit unterschiedlichen Namen, links und rechts jeweils in jeder Zeile den gleichen Namen vergeben), dann mit grid-area den Elementen sagen wo sie hin sollen (hier ist dann das bereits genannte :nth-child() oder auch :nth-of-type() hilfreich), die Elemente ausrichten und fertig.

tk1234 · 17. Januar 2024

Nachtrag (edit geht wohl nicht mehr): grid-template-rows brauchst du ggf. auch noch um die Höhe der einzelnen Felder in der mittleren Spalte zu definieren damit die Felder für Bild und Überschrift nicht zu hoch sind. Über Media Querys kannst du das ganze dann auch so steuern dass je nach verfügbarer Breite ein unterschiedlicher Wert für grid-template-areas verwendet wird und die Elemente somit schmäler oder breiter dargestellt werden.

Emess · 17. Januar 2024

Hab mich jetzt einpaar stunden im Netz Recherchiert und auf Codpen zusammen gefasst.

Wenn nur ich die gelben divs in die Klasse übernehme musst dann nicht grün nach unten Springen.

hier mal zum nachtesten sind nur wenige zeilen

Emess · 18. Januar 2024

hier der code

HTML

 <div class="flex-container">
   
    <div class="flex-item"></div>
    <div class="flex-item"></div>
</div>
 <div class="flex-container">
    <div class="flex-item"></div>
</div>  
  </div>

CSS

.flex-container {
      display: flex;
      flex-direction: row;
      justify-items: space-between;
      width: 50%;
    }


    .flex-item {
      height: 300px;
      margin-top:10px;
    }

    .flex-item:nth-of-type(2n-1) {
      background-color: gold;
    
    }

    .flex-item:nth-of-type(2n) {
     background-color: green;
   
    }
 


    @media (min-width: 768px) {
      .flex-item {
        flex-direction: column;
        flex: auto;
   
        height: 200px;
      }
    }

Alles anzeigen

m.scatello · 18. Januar 2024

Zitat von Emess

Wenn nur ich die gelben divs in die Klasse übernehme musst dann nicht grün nach unten Springen.

Nein, warum?

Code

flex-item:nth-of-type(2n-1) {
      background-color: gold;
    
    }

Jedes 2. Element -1, also 1

Code

    .flex-item:nth-of-type(2n) {
     background-color: green;
   
    }

Jedes 2. Element.

Das angezeigt Ergebnis passt genau zu deinem CSS-Code

Siehe https://www.w3schools.com/cssref/sel_nth-of-type.php

Emess · 18. Januar 2024

Um bei dem Beispiel zu bleiben . Wiederhole ich mal.

Code

p:nth-of-type(3n-1) {
background: red;
}

Bedeutet "3n" jedes 3. Element "3n-1" es wird bei 2. Element angefangen rot zu unterlegen? Ja?

m.scatello · 18. Januar 2024

Probiere es doch einfach mal aus! Auf w3schools gibt es einige Beispiele, die man selber bearbeiten kann. So sieht man sofort das Ergebnis.

Sempervivum · 21. Januar 2024

Zitat von @tk1234

Nicht mit flex, versuch es mal mit grid: grid-template-areas ist dein Freund.

Hier wäre eine Begründung wünschenswert, warum Du an dieser Stelle Grid bevorzugst. Dadurch wird alles nur unnötig kompliziert und mit jedem Spanning entfernt man sich von der Semantik eines Grid.

Zur Flexbox weitere Intems bzw Boxen hinzufügen

Jetzt mitmachen!

Teilen

Tags