我正在重建Facebook作为一个项目来学习一些新概念。其中之一就是使用Flexbox。如何设置两个弹性项目之间的固定距离?
如果您调整Facebook的登录页面大小,您将看到导航变小,但徽标和登录输入不会移动,并且空间不会改变。
我看到有人建议我停止使用浮动并使用Flexbox。我已经使用space-between
将它们设置为等同于容器的外边缘。
问题是,我似乎无法弄清楚当浏览器宽度减小时,我如何阻止它们一起移动,就像Facebook一样。如何“修复”它们之间的空间。
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;
}
谢谢。我认为运行一个无形的弹性项目可能是这种情况,但不确定是“最佳实践”还是我错过了某些东西。这非常有帮助。 –