Wie kann ich meine Flexbox Navigation vertikal erscheinen lassen?

Ich versuche, meine Navigation (Logo und Links) vertikal auf der linken Seite erscheinen zu lassen, und auch meine Links sollen nur vom Logo getrennt und nur links unten zu sehen sein. Ist es möglich mit flexbox zu arbeiten?Wie kann ich meine Flexbox Navigation vertikal erscheinen lassen?

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;}

Quelle

2016-03-30 Aris Constantinou

Hier sind einige flex Ausrichtung Techniken, die Ihnen helfen können: http://stackoverflow.com/a/33856609/3597276 –

Lesen Sie den kommentierten Code zur Erläuterung.

/*.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.*/ 
}

Quelle

2016-03-30 09:20:19

Dank viel Gebühr, obwohl ich zu 100%, weil es ist besser als 1000 px geändert Höhe;) –

Wie kann ich meine Flexbox Navigation vertikal erscheinen lassen?

Antwort

Verwandte Themen