What is the best way to move the about and contact links to the right side of the navigation section?

I have tried using align-items: flex end, however, for some reason it doesn't work.

.container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 25px;
}


/* Navigation */

.navigation-container {
  position: fixed;
  top: 0;
}

.navigation-items {
  display: flex;
  justify-content: center;
}

.footer-items {
  display: flex;
  justify-content: center;
}

<!-- Container -->
<div >
  <!-- Navigation -->
  <div >
    <span ></span>
    <!-- Results Nav-->
    <span  id="resultsNav">
      <h3>About</h3>
      <h3>&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;</h3>
      <h3>Contact</h3>
    </span>
  </div>
</div>

CodePudding user response：

Created a little jsfiddle for you:

https://jsfiddle.net/wrayvon/akzfuvq8/4/

Using this styling:

.container {  position: relative;  display: flex;  margin-top: 5px;  margin-bottom: 25px;}
.navigation-container {  width: 100%;}
.navigation-items {  display: flex;  justify-content: flex-end;}

That solves it :)

CodePudding user response：

I found 2 solutions:

Because you are already using position: fixed; you could just add right: 0; to your .navigation-container to make it align to the right.

.navigation-container {
  position: fixed;
  top: 0;
  right: 0;
}

Or you can make your navigation-container element 100% wide. Then you can add some flex styles to it like this, to make the children align to the right.

.navigation-container {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

CodePudding user response：

When you are using flex-direction:column then justify-content = vertical alignment and align-items = horizontal alignment.

As you can see in this example of your snippet. Align-items works as expected.

If you where adding align-items to a child of .container then you will not notice the change in alignment as the width of the child e.g .navigation-container needs to be (flex:1) to fill the width of its parent.

.container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 25px;
  align-items: flex-end;
}

/* Navigation */
.navigation-container {
  position: fixed;
  top: 0;
}

.navigation-items {
  display: flex;
  justify-content: center;
}

<!-- Container -->
<div >
  <!-- Navigation -->
  <div >
    <span ></span>
    <!-- Results Nav-->
    <span  id="resultsNav">
      <h3>About</h3>
      <h3>&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;</h3>
      <h3>Contact</h3>
    </span>
  </div>
</div>

CodePudding user response：

To assign end of the div parent should have 100% width. Just add the below CSS then it should work:

.navigation-container{
    width:100%;
}

.navigation-items{
    justify-content: flex-end;
}