0

I tried to create a menu bar using flexbox to help myself understand it. I made the parent element a display:flex and the child elements also. I then made the elements align to the left.

Problem 1 I tried to make use of the align-self:flex-end property on the final element but this doesn't appear to work. The last element on the menu remains aligned to the left with the others. I have previously used margin:auto but I don't see why we would do that if we have this nice flex property instead? Using margin:auto just seems like a hack to me. (FYI the div is using margin for a different purpose).

Problem 2 As a test I changed the elements to but this changed the behaviour completely. Surely converting any html element to a flexbox converts it from display:block or display:inline as it would have been by default to being a flexbox? What am I not understanding here?

The Code

<!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>
Adamantus
  • 813
  • 1
  • 12
  • 30
  • All of them are display: flex? I can understand why nav is display: flex but the others should not be. This is a pretty good read: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Esko Jul 10 '18 at 11:32
  • So I'm not going to get any help now then? – Adamantus Jul 10 '18 at 11:51
  • 1) All `align-*` properties align elements along the _cross_ axis (vertical, by default). There are no properties to align flex items along the _main_ axis (except `justify-content`) because their main axis alignment is controlled by the `flex` property. 2) Flexbox has its own placement rules, so all non-positioned _flex items_ (children of the _flex container_) are placed the same way regardless their original `display` value. But this value can affect the placement of their own content. – Ilya Streltsyn Jul 10 '18 at 12:04
  • @IlyaStreltsyn this is false `There are no properties to align flex items along the main axis (except justify-content) because their main axis alignment is controlled by the flex property` --> check the duplicate for more information – Temani Afif Jul 10 '18 at 12:14
  • @TemaniAfif, I over-simplified my answer to fit into comment length limit, but isn't it true that `justify-*` properties other than `-content` have no effect on flex items (by design)? It's possible to change their main-axis placement via `margin`s adjustment (as OP mentions), but it's not a Flexbox-specific property. – Ilya Streltsyn Jul 10 '18 at 14:18

0 Answers0