0
を変更したとき、私はFlexboxesを使用して、次のHTML/CSSコードを持っている：揃えフレキシボックスの表示サイズが
*{
font-family:Arial;
}
html,
body {
height: 100%;
margin: 0
}
.flexbox {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
height: 100%;
width: 100%
}
.flexbox .header{
background: green;
border:solid;
font-size: 30;
font-weight: bold;
padding-left: 5;
}
.flexbox .main {
flex: 1;
background: red;
position: relative
}
.flexbox-row {
display: flex;
position:absolute;
height: 100%;
width: 100%
}
.flexbox-row .links
{
background: yellow;
width:15%;
height:100%;
}
.flexbox-row .second {
flex: 1;
background: blue;
height:100%;
}
nav.sidenav {
margin:0;
background-color: white;
overflow: auto;
height:100%;
}
nav.sidenav a {
display: block;
color: black;
text-decoration: none;
padding: 8px;
text-align: center;
}
nav.sidenav a.active {
background-color: blue;
color: white;
}
nav.sidenav a:hover {
background-color: #555;
color: white;
text-decoration: underline;
}
@media screen and (max-width: 1000px) {
nav.sidenav {
width: 100%;
height: auto;
position: relative;
border-top:none;
border-bottom:solid;
margin-top:0;
}
nav.sidenav a {
float: left;
padding: 8px;
}
.flexbox {
display: flex;
flex-direction: column;
flex-wrap: initial;
width: 100%
}
.flexbox-row .links{
width:100%;
}
.flexbox-row .second {
background: blue;
}
}<div class="flexbox">
<div class="header">HeaderHeaderHeaderHeaderHeaderHeade</div>
<div class="main">
<div class="flexbox-row">
<div class="links">
navbar
</div>
<div class="second"> content</div>
</div>
</div>にはどうすれば表示幅を変更する際Flexboxesはこのように揃えることをアーカイブすることができます。 
したがって、ヘッダーは同じままで、ナビゲーションバーとコンテンツになります。ブラウザの高さを入力します。 フレックスボックスを正しく使用する方法をcssとdontに教えてください。あなたのイメージに持っているものである - （flex-direction: column;>）、メディアクエリー（@media screen and (max-width: 1000px) {...）で
私の答えは参考になりましたし、受け入れ、および/またはupvotedことができるなら、私に教えてください...またはそれは単に動作しませんでしたか？ – LGSon
私の答えがうまくいったり、役に立ったりしたという確認がなかったので、私はそれを削除しました。 – LGSon
申し訳ありませんが、過去数日間インターネットにアクセスできませんでした。それにもかかわらず、あなたの答えを読むことに感謝します。 – Kitumijasi