I am working on a project to enhance my knowledge by rebuilding Facebook. One of the new concepts I am learning is Flexbox.
When you resize the login page of Facebook, you'll notice that the Navigation shrinks but the logo and login inputs remain static, maintaining the same space.
Many have suggested abandoning floats in favor of using Flexbox. I have implemented it with space-between to evenly distribute them to the edges of the container.
The challenge now is figuring out how to prevent them from moving closer together when the browser width decreases, similar to Facebook. How can I maintain the "fixed" space between them?
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;
}
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;
}