How to move items to different sides of screen using flexbox?

Question

I am new to HTML/CSS and currently trying to learn flexbox. I am trying to move my unordered list all the way to the right side of the div while keeping the title on the left side. I tried justify-content: space-between, but it just moved the list to near the middle of the div.

.flex-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  background-color: DodgerBlue;
}

.nav-bar {
  background-color: purple;
  width: 100%;
  height: 30%;
  display: flex;
  justify-content: space-between;
  align-item: flex-end;
}

.nav-bar ul {
  list-style-type: none;
  display: flex;
}

.nav-bar ul li {
  padding: 2px;
  margin: 3px;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <div class="flex-container">
    <div class="nav-bar">
      <div>
        <h1>Title</h1>
      </div>
      <ul>
        <li><a href="#">Link 1</h1>
            <li><a href="#">Link 2</h1>
            <li><a href="#">Link 3</h1>
        </ul>
    </div>
    
</div>

</body>
</html>

Always Helping · Answer 1 · 2020-07-05T00:24:08.353

You do not need align-item: flex-end, Also the width was 100vw you can use the standard width of the container which will be always 100

Some issues with your HTML as well which i have fixed. The a was not closed properly.

You can read more about align-items here on MDN

The title is on left and links on the far right as you wanted.

Run snippet below to see it working.

.flex-container {
  display: flex;
  height: 100vh;
  background-color: DodgerBlue;
}

.nav-bar {
  background-color: purple;
  width: 100%;
  height: 30%;
  display: flex;
  justify-content: space-between;
}

.nav-bar ul {
  list-style-type: none;
  display: flex;
}

.nav-bar ul li {
  padding: 2px;
  margin: 3px;
}

<div class="flex-container">
  <div class="nav-bar">
    <div>
      <h1>Title</h1>
    </div>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </div>

</div>

score 1 · Accepted Answer · answered Jul 05 '20 at 00:19

there are two properties which used to place elements which is Justify-content: and align-content

align-content: The align-content property aligns a flex container’s lines within the flex container when there is extra space on the cross axis. Justify-content: The justify-content property aligns the flexed container’s contents on the main axis, which by default(in case of the web) is the horizontal axis.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

and you what you can do with problem is code yours like the following one

.flex-container {
  display: flex;
  height: 100vh;
  background-color: DodgerBlue;
}

.nav-bar {
  background-color: purple;
  width: 100%;
  height: 30%;
  display: flex;
  justify-content: space-between;
}

.nav-bar ul {
  list-style-type: none;
  display: flex;
}

.nav-bar ul li {
  padding: 2px;
  margin: 3px;
}

<div class="flex-container">
  <div class="nav-bar">
    <div>
      <h1>Title</h1>
    </div>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </div>

</div>

How to move items to different sides of screen using flexbox?

2 Answers2