Flexbox 1.0

Using Flexbox

by marek8623

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<nav>
  <a href=""><i class="fa fa-home"></i>Home</a>
  <a href=""><i class="fa fa-question"></i>About</a>
  <a href=""><i class="fa fa-phone"></i>Contact</a>
  <a href=""><i class="fa fa-paw"></i>Dogs</a>
</nav>

CSS

@import url('https://fonts.googleapis.com/css?family=Raleway:200');

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

a {
    font-size: 40px;
    margin: 20px;
    text-decoration: none;
    color: #95a5a6;
    font-family: 'Raleway';
    border-bottom: 1px solid #52c9aa;
    transition: color 0.5s ease-out;
}

a:hover {
    color: #3498db;
    border-bottom-color: #3498db;
}

i {
    margin-right: 10px;
}

@media screen and (max-width: 920px) {
    nav {
        justify-content: center;
    }
    a {
        font-size: 26px;
    }
}

@media screen and (max-width: 600px) {
    nav {
        flex-direction: column;
        align-items: center;
    }
}