リストされたアイテムを垂直方向に揃える方法は？

Question

次の例では、左にメニュー項目を取得して垂直方向に正当化する方法を示します。トップメニューの一番下からブラウザの一番下まで均等に配置したいと思います。

心に留めておくべきいくつかのもの：

• サイドメニューが表示されたら、それは画面をオフにスクロールする必要があります。
h1はコンテンツ領域の中心に置かれるべき

.TopMenuBar { 
 
    border: 1px solid purple; 
 
    background-color: purple; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.TopMenuBar ul { 
 
    list-style-type: none; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.TopMenuBar li { 
 
    display: inline; 
 
    padding: 20px; 
 
} 
 
.TopMenuBar li a { 
 
    color: white; 
 
    text-decoration: none; 
 
    padding: 20px; 
 
} 
 
.TopMenuBar li a:hover { 
 
    background-color: #b14eb1; 
 
    color: black; 
 
} 
 
.SideMenuBar { 
 
    background-color: orange; 
 
    margin-left: 20px; 
 
    margin-top: 0; 
 
    display: flex; 
 
    height: 100vh; 
 
    float: left; 
 
} 
 
.SideMenuBar ul { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style-type: none; 
 
    justify-content: space-between; 
 
} 
 
.SideMenuBar li a { 
 
    color: white; 
 
    text-decoration: none; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    display: list-item; 
 
} 
 
.SideMenuBar li a:hover { 
 
    background-color: #fcbf7e; 
 
    color: black; 
 
} 
 
main { 
 
    padding-left: 10px; 
 
    display: table 
 
} 
 
h1 { 
 
    text-align: center; 
 
}

<img src="#" width="100%" height="100px"> 
 
<div class="TopMenuBar"> 
 
    <ul> 
 
    <li><a href="#">Side</a> 
 
    </li> 
 
    <li><a href="#">Menu</a> 
 
    </li> 
 
    <li><a href="#">Bar</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<div class="SideMenuBar"> 
 
    <ul> 
 
    <li><a href="#">Side</a> 
 
    </li> 
 
    <li><a href="#">Menu</a> 
 
    </li> 
 
    <li><a href="#">Bar</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 

 
<h1>h1 Header</h1> 
 
<main> 
 
    <h2>h2 Header</h2> 
 
    <p>Main paragraph</p> 
 
    <a href="#">Main link</a> 
 
    <ul> 
 
    <li>Main list item</li> 
 
    <li>Main list item</li> 
 
    <li>Main list item</li> 
 
    </ul> 
 
    <h2>h2 Header</h2> 
 
    <p>Main paragraph</p> 
 
    <a href="#">Main link</a> 
 
    <ul> 
 
    <li>Main list item</li> 
 
    <li>Main list item</li> 
 
    <li>Main list item</li> 
 
    </ul> 
 
</main>

Answer 1

.SideMenuBar ul
justify-content: space-aroundにフレックスの表示を追加 - あなたは彼らがトップ/ボトムエッジに触れていない場合です。

.TopMenuBar { 
 
    border: 1px solid purple; 
 
    background-color: purple; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.TopMenuBar ul { 
 
    list-style-type: none; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.TopMenuBar li { 
 
    display: inline; 
 
    padding: 20px; 
 
} 
 

 
.TopMenuBar li a { 
 
    color: white; 
 
    text-decoration: none; 
 
    padding: 20px; 
 
} 
 

 
.TopMenuBar li a:hover { 
 
    background-color: #b14eb1; 
 
    color: black; 
 
} 
 

 
.SideMenuBar { 
 
    background-color: orange; 
 
    margin-left: 20px; 
 
    margin-top: 0; 
 
    display: flex; 
 
    height: 100vh; 
 
    float: left; 
 
} 
 

 
.SideMenuBar ul { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style-type: none; 
 
    justify-content: space-between; 
 
    display: flex; /*add*/ 
 
    flex-direction: column; /*add*/ 
 
} 
 

 
.SideMenuBar li a { 
 
    color: white; 
 
    text-decoration: none; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    display: list-item; 
 
} 
 

 
.SideMenuBar li a:hover { 
 
    background-color: #fcbf7e; 
 
    color: black; 
 
} 
 

 
main { 
 
    padding-left: 10px; 
 
    display: table 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
}

<img src="#" width="100%" height="100px"> 
 
<div class="TopMenuBar"> 
 
    <ul> 
 
    <li><a href="#">Side</a></li> 
 
    <li><a href="#">Menu</a></li> 
 
    <li><a href="#">Bar</a></li> 
 
    </ul> 
 
</div> 
 

 
<div class="SideMenuBar"> 
 
    <ul> 
 
    <li><a href="#">Side</a></li> 
 
    <li><a href="#">Menu</a></li> 
 
    <li><a href="#">Bar</a></li> 
 
    </ul> 
 
</div> 
 

 

 
<h1>h1 Header</h1> 
 
<main> 
 
    <h2>h2 Header</h2> 
 
    <p>Main paragraph</p> 
 
    <a href="#">Main link</a> 
 
    <ul> 
 
    <li>Main list item</li> 
 
    <li>Main list item</li> 
 
    <li>Main list item</li> 
 
    </ul> 
 
    <h2>h2 Header</h2> 
 
    <p>Main paragraph</p> 
 
    <a href="#">Main link</a> 
 
    <ul> 
 
    <li>Main list item</li> 
 
    <li>Main list item</li> 
 
    <li>Main list item</li> 
 
    </ul> 
 
</main>