2
\$\begingroup\$

I needed some help with Flex. I am trying to achieve something like this using flex but I cant seem to align all the items to the left for both. The code I provided below works just fine, but I'm sure there has to be a better way to do it but nothing seems to be working for me.

Here is a CodePen Link for anyone who would like to help me.

<div class="sidebar">
<nav class="sidebar-nav">
    <div class="sidebar-nav-line">
        <div class="sidebar-nav-text">
            <p>Home</p>
        </div>
        <div class="sidebar-nav-icon">
            <img class="sidebar-nav-icon-img" src="assets/img/sidebar-icons/home.png" alt="Home-Icon">
        </div>
    </div>
    <div class="sidebar-nav-line">
        <div class="sidebar-nav-text">
            <p>About Me</p>
        </div>
        <div class="sidebar-nav-icon">
            <img class="sidebar-nav-icon-img" src="assets/img/sidebar-icons/about_me.png" alt="About-Me-Icon">
        </div>
    </div>
    <div class="sidebar-nav-line">
        <div class="sidebar-nav-text">
            <p>Projects</p>
        </div>
        <div class="sidebar-nav-icon">
            <img class="sidebar-nav-icon-img" src="assets/img/sidebar-icons/projects.png" alt="Projects-Icon">
        </div>
    </div>
    <div class="sidebar-nav-line">
        <div class="sidebar-nav-text">
            <p>Resume</p>
        </div>
        <div class="sidebar-nav-icon">
            <img class="sidebar-nav-icon-img" src="assets/img/sidebar-icons/resume.png" alt="Resume-Icon">
        </div>
    </div>
    <div class="sidebar-nav-line">
        <div class="sidebar-nav-text">
            <p>Contact</p>
        </div>
        <div class="sidebar-nav-icon">
            <img class="sidebar-nav-icon-img" src="assets/img/sidebar-icons/contact.png" alt="Contact-Icon">
        </div>
    </div>
</nav>
</div>

CSS

.sidebar {
    background-color: #2C2C2C;
    width: 255px;
    height: 100vh;
}

.sidebar-nav {
    text-align: center;
}

.sidebar-nav-line {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.sidebar-nav-text{
    margin-right: 15px;
    align-self: center;
    color: #dec29b98;
    text-transform: uppercase;
    font-size: 20px;
}

.sidebar-nav-icon {
    margin-right: 32px;
    align-self: center;
}

.sidebar-nav-icon-img {
    width: 30px;
    height: 30px;
}
\$\endgroup\$
3
  • \$\begingroup\$ Welcome to Code Review! The description is confusing because it states "but I cant seem to align all the items to the left for both." then goes on to state: "The code I provided below works just fine..." Does this work to the best of your knowledge? \$\endgroup\$ Jun 16 at 15:54
  • \$\begingroup\$ It does work, I just wanted to know if there is a better way to do it. For now, i have stuck to using padding or margins to achieve what i am trying. \$\endgroup\$
    – Emon Hoque
    Jun 17 at 0:26
  • \$\begingroup\$ Use Flex and flex-direction just like div, I will post the example using Flex and direction. \$\endgroup\$
    – Punit
    Jun 21 at 6:56
2
\$\begingroup\$

I played a little with css and ended up with this. I don't know if it's really what you wanted, but maybe it can help you get some new ideas.

*{margin: 0;font-family: "Poppins", sans-serif;}
html{background-color:#1c1c20;}
.col{
  display:grid;
  width:200px;
  background-color:#2c2c2c;
  height:100vh;
}
.menu{
  width:95%;
  padding-top:10%;
}
.box{
  text-align:right;
  color:#dec29b98;
  padding:5px;
}
.box > div{
margin-right:10px;
display:inline-block;
vertical-align: middle;
cursor:pointer;
}
<div class="col">
  <div class="menu">
      
      <div class="box">
        <div>LINK 1</div>
        <div><img src="https://i.stack.imgur.com/T5uTa.png"></div>
      </div>
    
      <div class="box">
        <div>LINK 2</div>
        <div><img src="https://i.stack.imgur.com/T5uTa.png"></div>
      </div>
      
      <div class="box">
          <div>LINK 3</div>
          <div><img src="https://i.stack.imgur.com/T5uTa.png"></div>
      </div>
      
  </div>
</div>

\$\endgroup\$
2
  • 1
    \$\begingroup\$ I just tried it out and it works for me too! I just wanted to know if there's a better way to achieve it and this certainly seems better. I appreciate your help! \$\endgroup\$
    – Emon Hoque
    Jun 17 at 0:28
  • 1
    \$\begingroup\$ @EmonHoque Remember to not only check answers, but also upvote answers you find useful. It gives the answerer a confidence boost seeing those imaginary numbers tick up ^^ \$\endgroup\$ Jun 17 at 5:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.