Question

我试图让我的导航（徽标和链接）在左侧垂直显示，而我的链接也与徽标分开，仅在左下方。是否可以使用flexbox完成？

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

Answer 1

阅读评论代码以获得解释。

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

如何让我的flexbox导航垂直显示？

1 个答案: