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\$ Commented Jun 16, 2021 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\$ Commented Jun 17, 2021 at 0:26
  • \$\begingroup\$ Use Flex and flex-direction just like div, I will post the example using Flex and direction. \$\endgroup\$ Commented Jun 21, 2021 at 6:56

1 Answer 1

Reset to default
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.sstatic.net/T5uTa.png"></div>
      </div>
    
      <div class="box">
        <div>LINK 2</div>
        <div><img src="https://i.sstatic.net/T5uTa.png"></div>
      </div>
      
      <div class="box">
          <div>LINK 3</div>
          <div><img src="https://i.sstatic.net/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\$ Commented Jun 17, 2021 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\$ Commented Jun 17, 2021 at 5:50

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.