フレックスボックスのリストアイテムを持つタグの垂直方向の整列

Question

いくつかのリストボックスにいくつかの可変長テキストがあります。これは、垂直整列されていないタグ内のテキストのために一致しません。

私は様々なフレックスボックスオプションを標準垂直アライメントとあわせて試してみましたが、あまり役に立たないです。

Flexbox内のタグ内にテキストをどのように配置することができますか？ Inspect ElementのCSS要素をPlunkerに追加しました。したがって、alpartsは関係ありませんが、あなたはそのアイデアを得るでしょう。 https://plnkr.co/edit/EAwV0OtXg7Z8mSsHQoho?p=preview

.mobile-buttons > ul.side-list { 
 
    display:flex; 
 
    justify-content: space-around; 
 
    align-self:center; 
 
    flex-wrap:wrap; 
 
    text-align: center; 
 
    list-style: none; 
 
    margin-left: 0; 
 
    margin-bottom: 1.938em; 
 
    margin: 0.937em 0 0.937em 0; 
 
} 
 

 
.mobile-buttons > ul.side-list li { 
 
    display: inline-flex; 
 
    background: none; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 0.913em; 
 
    line-height: 1.538; 
 
} 
 

 
.mobile-buttons .blue-bg { 
 
    margin-bottom: 10px; 
 
    max-width: 150px; 
 
    min-height: 17px; 
 
    min-width: 150px; 
 
    font-size: 1em; 
 
    min-height: 17px; 
 
    height: 40px; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    display: inline-block; 
 
    min-height: 17px; 
 
    padding: 27px 2px 27px; 
 
    text-align: center; 
 
    color: #fff; 
 
    line-height: 1.15em; 
 
    top: 1px; 
 
    position: relative; 
 
    -moz-border-radius: 4px; 
 
    -webkit-border-radius: 4px; 
 
    border-radius: 4px; 
 
} 
 

 
.btn, a.btn { 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    display: inline-block; 
 
    min-height: 17px; 
 
    max-width: 180px; 
 
    min-width: 180px; 
 
    padding: 27px 2px 27px; 
 
    text-align: center; 
 
    color: #fff; 
 
    line-height: 1.15em; 
 
    top: 1px; 
 
    position: relative; 
 
    -moz-border-radius: 4px; 
 
    -webkit-border-radius: 4px; 
 
    border-radius: 4px; 
 
} 
 

 
.blue-bg { 
 
    border: #1D5FD5 1px solid; 
 
    text-shadow: #0a39c2 0 1px 0; 
 
    box-shadow: inset 0px 1px 1px 0px #8aa2e2, 0px 1px 2px 0 #696b6b; 
 
    background: linear-gradient(to bottom, #4089e9 0%,#1d5fd5 100%); 
 
}

<section class="mobile-buttons lines-bg clearfix row"> 
 
    <ul class="side-list"> 
 
    <li><a href="/link1" class="btn blue-bg">The First Menu</a></li> 
 
    <li><a href="/link2" class="btn blue-bg">Long Description on Second Menu</a></li> 
 
    <li><a href="/link3" class="btn blue-bg">Short 3rd Menu</a></li> 
 
    <li><a href="/link4" class="btn blue-bg">Extra description on fourth menu option</a></li> 
 
    </ul> 
 
</section>

Answer 1

あなたは.mobile-buttons .blue-bgでdisplay:flexを使用することができます。

.mobile-buttons > ul.side-list { 
 
    display:flex; 
 
    justify-content: space-around; 
 
    align-self:center; 
 
    flex-wrap:wrap; 
 
    text-align: center; 
 
    list-style: none; 
 
    margin-left: 0; 
 
    margin-bottom: 1.938em; 
 
    margin: 0.937em 0 0.937em 0; 
 
} 
 

 
.mobile-buttons > ul.side-list li { 
 
    display: inline-flex; 
 
    background: none; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 0.913em; 
 
    line-height: 1.538; 
 
} 
 

 
.mobile-buttons .blue-bg { 
 
    margin-bottom: 10px; 
 
    max-width: 150px; 
 
    min-height: 17px; 
 
    min-width: 150px; 
 
    font-size: 1em; 
 
    min-height: 17px; 
 
    height: 40px; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    min-height: 17px; 
 
    padding: 27px 2px 27px; 
 
    text-align: center; 
 
    color: #fff; 
 
    line-height: 1.15em; 
 
    top: 1px; 
 
    position: relative; 
 
    -moz-border-radius: 4px; 
 
    -webkit-border-radius: 4px; 
 
    border-radius: 4px; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.btn, a.btn { 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    display: inline-block; 
 
    min-height: 17px; 
 
    max-width: 180px; 
 
    min-width: 180px; 
 
    padding: 27px 2px 27px; 
 
    text-align: center; 
 
    color: #fff; 
 
    line-height: 1.15em; 
 
    top: 1px; 
 
    position: relative; 
 
    -moz-border-radius: 4px; 
 
    -webkit-border-radius: 4px; 
 
    border-radius: 4px; 
 
} 
 
.blue-bg { 
 
    border: #1D5FD5 1px solid; 
 
    text-shadow: #0a39c2 0 1px 0; 
 
    box-shadow: inset 0px 1px 1px 0px #8aa2e2, 0px 1px 2px 0 #696b6b; 
 
    background: linear-gradient(to bottom, #4089e9 0%,#1d5fd5 100%); 
 
}

<section class="mobile-buttons lines-bg clearfix row"> 
 
    <ul class="side-list"> 
 
    \t <li><a href="/link1" class="btn blue-bg">The First Menu</a></li> 
 
    \t <li><a href="/link2" class="btn blue-bg">Long Description on Second Menu</a></li> 
 
    \t <li><a href="/link3" class="btn blue-bg">Short 3rd Menu</a></li> 
 
    \t <li><a href="/link4" class="btn blue-bg">Extra description on fourth menu option</a></li> 
 
    </ul> 
 
</section>

Answer 2

多くの不要なコードや重複を。以下のように書き換えてください。フレキシボックスリストアイテムとタグの 垂直整列は

.mobile-buttons .blue-bg { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

.mobile-buttons>ul.side-list { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    flex-wrap: wrap; 
 
    list-style: none; 
 
    margin: 0.937em 1.938em 0; 
 
} 
 

 
.mobile-buttons>ul.side-list li { 
 
    font-size: 0.913em; 
 
    line-height: 1.538; 
 
} 
 

 
.mobile-buttons .btn { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    margin-bottom: 10px; 
 
    max-width: 150px; 
 
    min-width: 150px; 
 
    min-height: 17px; 
 
    height: 40px; 
 
    padding: 27px 2px 27px; 
 
} 
 

 
.mobile-buttons .blue-bg { 
 
    font-size: 1em; 
 
    font-weight: bold; 
 
    color: #fff; 
 
    line-height: 1.15em; 
 
    -moz-border-radius: 4px; 
 
    -webkit-border-radius: 4px; 
 
    border-radius: 4px; 
 
    border: #1D5FD5 1px solid; 
 
    text-shadow: #0a39c2 0 1px 0; 
 
    box-shadow: inset 0px 1px 1px 0px #8aa2e2, 0px 1px 2px 0 #696b6b; 
 
    background: linear-gradient(to bottom, #4089e9 0%, #1d5fd5 100%); 
 
} 
 

 
.btn, 
 
a.btn { 
 
    text-decoration: none; 
 
    text-align: center; 
 
}

<section class="mobile-buttons lines-bg clearfix row"> 
 
    <ul class="side-list"> 
 
    <li><a href="/link1" class="btn blue-bg">The First Menu</a></li> 
 
    <li><a href="/link2" class="btn blue-bg">Long Description on Second Menu</a></li> 
 
    <li><a href="/link3" class="btn blue-bg">Short 3rd Menu</a></li> 
 
    <li><a href="/link4" class="btn blue-bg">Extra description on fourth menu option</a></li> 
 
    </ul> 
 
</section>

を設定することにより、これが達成される CSS Flexbox

を使用して行うことができ