Icons on sidebar stretch across whole sidebar-CodePudding

I'm new to HTML/CSS and I came across a problem and couldn't find a solution for it. I want to have a sidebar, which I managed to do. In this sidebar are 5 icons for navigation. Now, my issue is that I want the icons to be evenly spread across the sidebar to fill it completely and not leave spaces between or underneath them. (I also want the sidebar to have even spacing on top and bottom but couldn't do that either.) My HTML:

body{
    background: #1A1A1A;
    height: 100%;
    overflow: hidden;
}
.side_bar{
    background: linear-gradient(to bottom, #1A0066, #7B1685);
    opacity: 0.7;
    height: 93%;
    width: 80px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    margin: 20px 10px;
    overflow: hidden;
    border-radius: 20px;
}
.side_bar a{
    display: block;
    text-align: center;
    padding:  30% 10px;
    font-size: 40px;
    transition: all 0.4s ease;
    color: #6944DA;
}
.side_bar a:hover{
    background-color: #5A315E;
}
.active_icon{
    background-color: #6F119D;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>None</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

<div >
    <a  href="#">
        <i ></i>
    </a>
    <a href="#">
        <i ></i>
    </a>
    <a href="#">
        <i ></i>
    </a>
    <a href="#">
        <i ></i>
    </a>
    <a href="#">
        <i ></i>
    </a>
</div>

</body>
</html>

I hope someone can help me out. Cheers!

CodePudding user response：

You can use flexbox. You're making your side_bar class flex and you can use flex-direction to make them vertical (https://developer.mozilla.org/fr/docs/Web/CSS/flex-direction).

CodePudding user response：

Using flex you can achieve this here:

body{
    background: #1A1A1A;
    height: 100%;
    overflow: hidden;
}
.side_bar{
    background: linear-gradient(to bottom, #1A0066, #7B1685);
    opacity: 0.7;
    height: 93%;
    width: 80px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    margin: 20px 10px;
    overflow: hidden;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.side_bar a{
    text-align: center;
    font-size: 40px;
    transition: all 0.4s ease;
    color: #6944DA;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
.side_bar a:hover{
    background-color: #5A315E;
}
.active_icon{
    background-color: #6F119D;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>None</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

<div >
    <a  href="#">
        <i ></i>
    </a>
    <a href="#">
        <i ></i>
    </a>
    <a href="#">
        <i ></i>
    </a>
    <a href="#">
        <i ></i>
    </a>
    <a href="#">
        <i ></i>
    </a>
</div>

</body>
</html>

mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/flex