對齊Flexbox的不同，當顯示尺寸變化

我使用Flexboxes以下HTML/CSS代碼：對齊Flexbox的不同，當顯示尺寸變化

*{ 
 
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排列是這樣的：

所以標題保持不變，然後是導航欄和內容。填充瀏覽器高度。IAM新的CSS和不太瞭解如何正確使用柔性盒。

來源

2017-10-15 Kitumijasi

讓我知道，如果我的回答是有益的，可以接受和/或upvoted ...或者它只是沒有工作？ – LGSon

因爲我沒有得到任何確認我的回答有用或有幫助，所以我刪除了它。 – LGSon

對不起，最後幾天無法捕捉任何互聯網。希望能夠閱讀您的答案。 – Kitumijasi

的2個主要方面：

在較窄的屏幕，利用媒體查詢，把content下links
刪除絕對定位並使用Flexbox代替，因此它的尺寸將與內容相符

我在CSS中添加了很多註釋，解釋了什麼和爲什麼。

* { 
 
    font-family: Arial; 
 
} 
 

 
html,body { 
 
    height: 100%; 
 
    margin: 0 
 
} 
 

 
.flexbox { 
 
    display: flex; 
 
    flex-direction: column; 
 
    /*flex-wrap: nowrap;   not needed, default value */ 
 
    height: 100%; 
 
    /*width: 100%     not needed, default behavior */ 
 
} 
 

 
.flexbox .header { 
 
    background: green; 
 
    border: solid; 
 
    font-size: 30; 
 
    font-weight: bold; 
 
    padding-left: 5px;   /* need unit, added "px" */ 
 
} 
 

 
.flexbox .main { 
 
    flex: 1; 
 
    background: red; 
 
    /*position: relative;   not needed anymore */ 
 
    display: flex;    /* instead of absolute position */ 
 
} 
 

 
.flexbox-row { 
 
    display: flex; 
 
    /*position: absolute;   not needed anymore */ 
 
    /*height: 100%;    not needed when parent has display: flex */ 
 
    width: 100%; 
 
} 
 

 
.flexbox-row .links { 
 
    background: yellow; 
 
    width: 15%; 
 
    /*height: 100%;    not needed when parent has display: flex */ 
 
} 
 

 
.flexbox-row .second { 
 
    flex: 1; 
 
    background: blue; 
 
    /*height: 100%;    not needed when parent has display: flex */ 
 
} 
 

 

 
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; 
 
    } 
 
    /* not needed, already set 
 
    .flexbox { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: initial; 
 
    width: 100%; 
 
    } 
 
    */ 
 
    .flexbox-row { 
 
    flex-direction: column; /* added, put content below navbar */ 
 
    } 
 
    .flexbox-row .links { 
 
    width: 100%; 
 
    } 
 
    /* not needed, already set 
 
    .flexbox-row .second { 
 
    background: blue; 
 
    } 
 
    */ 
 
}

<div class="flexbox"> 
 

 
    <div class="header">HeaderHeaderHeaderHeaderHeaderHeader</div> 
 

 
    <div class="main"> 
 
    <div class="flexbox-row"> 
 
     <div class="links"> 
 
     navbar 
 
     </div> 
 
     <div class="second"> 
 
     content 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
</div>

來源

2017-10-16 07:05:50 LGSon

謝謝，解決了我需要的一切！ – Kitumijasi

在媒體查詢（@media screen and (max-width: 1000px) {...），加

.flexbox-row { 
    flex-direction: column; 
}

哪個地方的孩子.flexbox-row下面的每個其他元素（即.links和.second）（ - >flex-direction: column;），這是你在你的形象。下面是修改的摘錄：

*{ 
 
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; 
 
} 
 
.flexbox-row { 
 
    flex-direction: column; 
 
} 
 
}

<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>

來源

2017-10-15 21:19:39 Johannes

對齊Flexbox的不同，當顯示尺寸變化

回答

相關問題