Flexbox auf verschachtelte Listen anwenden?
Hi, ich habe eine verschachtelte Liste und möchte diese mit Flexbox anordnen.
Das funktioniert allerdings nicht nur mit display:flex und flex-direction:row. Wenn ich in Chrome nachschaue wird mir als CSS Eigenschaft display:block angezeigt.
<div class="skills">
<ol>
<li>
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
</li>
<li>
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
</li>
</ol>
<ol>
<li>
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
</li>
<li>
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
</li>
</ol>
<ol>
<li>
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
</li>
<li>
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
</li>
</ol>
</div>
.skills{
display: flex;
flex-direction: row;
}
Veröffentliche doch erstmal deinen Code, lade den relevanten Ausschnitt hier hoch und dann können wir dir weiterhelfen
Okay
1 Antwort
Ein Element mit display:flex richtet nur seine direkten Kindelemente aus. Wenn die Kinder ebenfalls wieder Flex-Boxen sein sollen, musst du das entsprechend definieren. Sie haben dann aber ihren eigenen Fluss und ordnen sich nicht in den der Eltern ein.
Ja aber so .skills > li? Oder welche Selektoren
Das wäre zumindest ein gültiger Selektor. Ich weiß aber nicht, was du erreichen willst und warum du dafür verschachtelte Listen brauchst. Wie ich halt schon schrieb, ist bei verschachtelten Listen jeder Liste ein extra Flexbox-Container und musst entsprechend so behandelt werden.
Wie definiert man das?