CODEWITHSUNDEEP
htmlcssflexboxhtml-lists
Blank
Blank

Reputation: 540

using flexbox on ul (next to eachother)

I'm trying to use flexbox on my <ul> so I can align them next to eachother. When I use this display:flex; flex-direction: row; on my <ul> it will also effect the child (in this case all the <li>)

I tried giving the <li> a display:flex; aswell and flex-direction: column; but this did not help.

How can I achieve what I'm trying to do here? Look at my jsFiddle for a demo.

Upvotes: 1

Views: 2744

Answers (1)

Belder
Belder

Reputation: 808

If you want each <ul> displayed as a column next to each-other, you can wrap all of your <ul> inside of a div like so:

div {
  display: flex;
}

ul {
  display: flex;
  flex-direction: column;
}
<div>
  <ul>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
  </ul>
  <ul>
    <li>Best 1</li>
    <li>Best 2</li>
    <li>Best 3</li>
  </ul>
</div>

Upvotes: 2

Related Questions