Question

我试图使用flexbox创建一个菜单栏，以帮助自己理解。我将父元素设置为display：flex，子元素也设置为display：flex。然后，我使元素向左对齐。

问题1 我试图在最后一个元素上使用align-self：flex-end属性，但这似乎不起作用。菜单上的最后一个元素与其他元素保持左对齐。我以前使用过margin：auto，但是我不明白为什么如果我们有这个不错的flex属性，为什么要这么做呢？在我看来，使用margin：auto似乎是一种技巧。（仅供参考，div将保证金用于其他目的）。

问题2 作为测试，我将元素更改为，但这完全改变了行为。可以肯定地将任何html元素转换为flexbox，将其从display：block或display：inline转换为默认设置为flexbox吗？我在这里不明白什么？

代码

<!doctype html>
  <html lang="en">

  <head>


  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Test 1 Flexbox</title>

  <link rel="stylesheet" href="css/main.css">
  <link rel="icon" href="images/favicon.png">

  <style type="text/css">


  div{
    width:50em;
    margin-left:auto;
    margin-right:auto;
    display:flex;
    border:1px solid black;
  }

  nav{
    display:flex;
    width:50em;
    flex-direction:column;
    align-items:center; /*vertical*/
    justify-content:left; /*horizontal*/
    border:1px solid blue;
  }

  nav a{
    width:6em;
    display:flex;
    border:1px solid green;
    margin-right:1em;
  }

  #last{
    align-self:flex-end;
  }

  @media ( min-width:37em )
  {
    nav{
        flex-direction:row;
    }
  }

</style>

</head>

<body>

<div>

    <nav>
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
        <a href="#">Link 4</a>
        <a id="last" href="#">Link 5</a>        
    </nav>

    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  </body>

</html>

flexbox的子元素行为不同

0 个答案: