Problems with flex-box that are not making sense to me

HTML-CSS
1

Okay so I’ve spent a long time trying to figure this out. I basically have a navigation bar that I want as a column and a main text area I want on the right of it just like displayed here - https://technical-documentation-page.freecodecamp.rocks/#Introduction

I have been messing around with this for a long time and can’t find a solution. I do have them side by side however my heading for my links and my actual links are reacting separately when using flex. they are all in the same nav link “wrapped up” so I’m not sure why it’s doing this?

for example, when I use “space-between” it’s not separating my links and my header evenly. It’s simply bunching my links together and spacing them away from my header. I have tried targeting them separately but then it messes everything up completely. I don’t know what to do here

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<html>
<head>
<title>RS Combat Skills</title>
  <style>
    .nav-bar {
      background-color: #d5dbd5;
      display: inline-flex;
      flex-direction: column;
      Height: 100%;
      width: 20%;
      border-right: solid;
      position: fixed; 
      list-style: none;
      justify-content: space-between;
      
    }
    .main-div1 {
      display: flex;
      flex-direction: column;
      background-color: #eff5e9;
      width: 80%;
      float: right;
    }
    body {
      margin: 0
    }
  </style>
</head>

<body>
  <main>  
    <nav class="nav-bar">
        <header><b>Runescape Combat Skills</b></header>
          <ul>
            <li><a class="nav-link" href="#">Attack</a></li>
            <li><a class="nav-link" href="#">Strength</a></li>
            <li><a class="nav-link" href="#">Defense</a></li>
            <li><a class="nav-link" href="#">Prayer</a></li>
            <li><a class="nav-link" href="#">Magic</a></li>
            <li><a class="nav-link" href="#">Ranged</a></li>
            <li><a class="nav-link" href="#">HP</a></li>
          </ul>
    </nav>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.66 Safari/537.36 Edg/103.0.1264.44

Challenge: Build a Technical Documentation Page

Link to the challenge:

2

nav bar has two elements inside, an header and an ul
if you want to flex the links, you need to apply flexbox to the ul

3

yeah, but then the header is not included, that was the problem. :confused:

4

then you need to use flexbox twice

5

Shouldn’t flexbox target all of the nested elements? That is what is confusing me. They are all nested in the nav link, so why is only the UL being targeted?

6

not all the nested elements, the display property is not inherited

it’s not automatic that you want every descendant to be flex

7

Thank you for the quick replies, it sounds like I need to dive deeper into this. Thank you for the help!

8

It’s a common mistake. Only direct children of the flex container are flex items.

Think about the alternative. You have some container class that is wrapping all your elements, you set it to flexbox and now all elements are suddenly flex items? That wouldn’t be very good.

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.