0

I am trying to get my navigation (logo and links) to appear vertically on the left and also my links to have separation from the logo and be on the bottom left only. Is it possible to be done with flexbox ?

Codepen

<html>
<head>
  <link rel="stylesheet" href="=style.css">
</head>
<body>


    <header class="main-header">
        <img class="logo"src="http://www.impexsolutions.org/images/world-icon.png">
        <ul class="flex-nav">
                    <li><a href="index.html"><span><img src="http://icons.iconseeker.com/png/fullsize/summer-collection/web-1.png"></span></a></li>
        <li><a href="index.html"><span><img src="http://icons.iconseeker.com/png/fullsize/summer-collection/web-1.png"></span></a></li>
       <li><a href="index.html"><span><img src="http://icons.iconseeker.com/png/fullsize/summer-collection/web-1.png"></span></a></li>
        <li><a href="index.html"><span><img src="http://icons.iconseeker.com/png/fullsize/summer-collection/web-1.png"></span></a></li>
       <li><a href="index.html"><span><img src="http://icons.iconseeker.com/png/fullsize/summer-collection/web-1.png"></span></a></li>
        </ul>
      </header>

    <div class="primary">
      <h1></h1>
      <p></p>
      <p></p>
    </div>

    <div class="secondary">
      <h1></h1>
      <p></p>
      <p></p>
    </div>

</body>
</html>

Style.css

/*GLOBAL STYLES*/

*{padding: 0;margin: 0;box-sizing: border-box;}
ul{list-style: none;}
a{text-decoration: none;}

/*FLEX*/

.container{}
.primary{}
.secondary{}
.flex-nav{}
.flex-nav li{}
.flex-nav a{}
.flex-nav span{}

/*STYLES*/

body{background-color: #a7a7a7;}

/*IMAGE STYLE*/

.main-header,
.flex-nav {
    display: flex;
    flex-direction: row;
    }
.main-header {
    align-items:center;
    flex-direction: row;
    justify-content: space-between;}
.logo{max-width: 100px;max-height:100px;}
.flex-nav img{width:50px;}
Aris Constantinou
  • 178
  • 14

1 Answers1

1

Read the commented code for explanation.

/*.flex-nav is a flex item inside the flex container, so it should not have properties that belong to the flex container.*/
.main-header
/*.flex-nav*/ {
    display: flex;
    flex-direction: column; /*Column instead of row.*/
    }
.main-header {
    /*align-items:center; Do not need this, default is flex-start.*/
    /*flex-direction: row; No need to have this property twice.*/
    justify-content: space-between;
    height: 1000px; /*Height, just for demonstrational purposes.*/
}