CODEWITHSUNDEEP
htmlcssflexbox
yohohosilver
yohohosilver

Reputation: 367

How to set a fixed distance between two flex items?

I am rebuilding Facebook as a project to learn some new concepts. One of those is using Flexbox.

If you resize the login page of Facebook, you will see that the Navigation gets smaller but the logo and login inputs don't move, and the space doesn't change.

I have seen people recommend that I stop using floats and use Flexbox. I have set it up using space-between to push them equally to the outside edges of the container.

The problem is is I cannot seem to figure out how I keep them from moving together when the browser width is reduced, like Facebook does. How does one "fix" the space between them.

https://codepen.io/weber93/pen/owwBQY

header {
  position: fixed 0 0;
  background-color: #3b5998;
  background-image: linear-gradient(#4e69a2, #3b5998 50%);
  border-bottom: 1px solid #133783;
  height: 83px;
  width: 100vw;
}

header .container {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  }

/*///// Header Logo ///////*/
header #logo {
  height: 40%;
  margin-top: 17px;
  margin-
}

header img {
  height: 100%;
}

/*///// Header Login Bar ///////*/

#login {
  margin-top: 6px;
  font-size: .8rem;
}

#login thead {
  color: #ffffff;
  font-size: .8rem;
}

#login thead td {
  padding-left: 3px;
}

#header-input {
  margin-bottom: 5px;
}

#header-input input{
  margin-right: 14px;
  margin-top: 6px;
  width: 150px;
  height: 23px;
}

#login input{
  border: solid 1px #1d2a5b;
  padding: 2px;
}

#login input:focus{
  outline-color: rgb(240,119,70);

}

#login button {
  background-color: #4267b2;
  border: 1px solid #29487d;
  border-radius: 2px;
  color: #ffffff;
  font-weight: 600;
  padding: 3px 6px;
}

#login button:hover {
  background-color: #365899;
  }

#forgot-account {
  padding-top: 6px;
}

#forgot-account a{
  color: #9cb4d8;
  text-decoration: none;
}

#forgot-account a:hover {
  text-decoration: underline;
}

Upvotes: 2

Views: 2343

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371271

If you're looking for a fixed distance between two elements, then use fixed units, like pixels.

Your layout won't work with justify-content because this property simply distributes free space in the container. As the amount of space changes when the screen is re-sized, the amount of space to distribute also changes.

Put another way, most flex properties, including justify-content, are designed to create flexible – not fixed – layouts.

Instead, try something like this:

header .container {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  /* justify-content: space-between; */
  }

header #logo {
  height: 40%;
  margin-top: 17px;
  margin-right: 450px;  /* new */
}

revised codepen

Alternatively, you can insert a third, invisible flex item between the logo and login. This "spacer" item can be set to something like: flex: 0 0 450px.

Upvotes: 3

Related Questions