Zur Flexbox weitere Intems bzw Boxen hinzufügen

  • 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>

    miflo.de

  • 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.

  • 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


  • 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.

  • @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>
  • 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:

    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.

  • 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

  • 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.

  • 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.

  • 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.

  • 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>
  • 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?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!