私はいくつかの新しい概念を学ぶプロジェクトとしてFacebookを再構築しています。そのうちの1つがFlexboxを使用しています。2つのフレックスアイテム間の固定距離を設定するにはどうすればよいですか?
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;
}
ありがとうございます。私は目に見えないフレックスアイテムを走らせることが事実かもしれないと思ったが、それが「ベストプラクティス」だったのか、何かが欠けていたのかどうかは分からなかった。これは非常に役に立ちます。 –