• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Flexbox dynamisch an Inhalt anpassen

H

Honos

Neues Mitglied
Moin,
ich habe zwei Flexboxen, was auch ganz gut funktioniert. Per Default werden die beiden Boxen ja von der Höhe auf das größte Element angepasst. Mittels align-items habe ich bereits versucht die Höhe dynamisch an den Inhalt anzupassen. Weiß jemand warum das nicht geht?
HTML: 
<html><head>
    <link href="design.css" rel="stylesheet">
</head>

    <body>
        <div class="Seite">
        <header>
            <h1>Title</h1>
        </header>
        
        <nav>
            Navigation
        </nav>
        <div class="main">

        
        <article>

Hallo<br>
Dies ist ein Tes


        </article>
            <aside>
        <h4>Infobox</h4>
        Hier finden Sie die aktuellsten NEWS zu dieser Seite
            </aside>
    </div>   
</div>
    </body>
</html>
CSS: 
body {   
    
    background-color: white;
    font-family:sans-serif;
    margin:0 auto;
    max-width: 1024px;

}

.Seite{
    background-color:ghostwhite;
    margin-top:10px;
    margin-bottom:10px;
    
}
.main{
        display:flex;
        flex-flow:row;
        justify-content:space-between; //gibt an dass im Body alle Flexboxen flexibel sind
}
header{
    background-color: silver;
    margin-top:20px;

}
header h1{
    text-align:center;
    margin-top:20px;
}
article{
    display:flex;
    align-items:flex-start;
    flex-basis:90%;
    background-color: grey;
    margin:10px;
    padding:10px;
    }
    
nav{
    background-color: silver;
    margin:10px;
}
aside{
    display:flex;
    flex-flow:column;
    align-items:flex-start;
    flex-basis:10%;
    background-color:lightskyblue;
    margin:10px;
    margin-left:20px;
    padding:10px;
    border-left-style:solid ;
    border-left-color: deepskyblue;
    border-left-width: 1.5em;
}
aside h4 {
    margin-top:0px;
    margin-bottom:5px;
}
 
Hallo

So ganz habe ich dein Problem eventuell nicht verstanden.

Füge mal im CSS zu ".main" die CSS-Anweisung "align-items: flex-start;" hinzu.

Gruss

MrMurphy
 
... hmmm... irgendwie habe ich das Gefühl. du hast das mit den Flexboxen noch nicht so richtig verstanden!
Du solltest vielleicht nochmal zu den einzelnen Formatierungen etwas Grundlagenstudium betreiben ... hier ist das glaube ich ganz gut beschrieben:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Vom Grundsatz her hast du in deinem Code eine Flexbox (div.main) und in dieser einen Box zwei Flex-Items (article und aside).
Es macht also keinen Sinn, bei den Flex-Items im CSS 'display: flex;' anzugeben... es sei denn, in diesem Element sind Elemente enthalten, die du mit 'flex' anordnen willst! Kann ich in deinem Fall aber nicht erkennen.
Wie sich article und aside innerhalb des Flex-Containers (main) verhalten legst du im CSS von .main fest und da sollte folgendes reichen.
CSS: 
.main{
        display: flex;
        justify-content: space-between;
}
Die Eigenschaften 'flex-direction: row;' und align-items: stretch; sind eigentlich als Standardwerte voreingestellt und das brauchst du nur angeben, wenn du zB wie @MrMurphy vorgeschlagen hat die Einstellung auf 'align-items: flex-start;' ändern willst.
Das CSS für article und aside soll jetzt nur noch die Eigenschaften regeln, die nicht schon in main vorgegeben sind.
CSS: 
article{
    flex-basis:90%;
    background-color: grey;
    margin:10px;
    padding:10px;
}
aside{
    flex-basis:10%;
    background-color:lightskyblue;
    margin:10px;
    margin-left:20px;
    padding:10px;
    border-left-style:solid ;
    border-left-color: deepskyblue;
    border-left-width: 1.5em;
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben