モバイル用フレックスボーダー幅100％

Question

私はフレックスボックスを使用していますが、私のボーダーが列ラップ用に指定されたメディアクエリに対して正しく動作するようには見えません。

境界線をデバイス幅全体に完全に広げたいと思っています。たとえば、境界線を左端からデバイスの右側にずらすことができます。それぞれの要素が、デバイス上では「行」が表示されていますが、現在のところ境界線は半分にしか伸びず、li要素の一部は他の要素がないときに行を共有しています。 aにブロックを表示させても、それは機能しません。私はまた、要素のフレックスベース100％を作ろうとしました。

編集：私はポジショニングのためにそれを考え出しました。私は#nav ulを作った。 #nav列の折り返しだけではありません。しかし、残念ながら私はまだ国境の問題を経験しています。

#nav { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-flow: row wrap; 
 
    margin: 0; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
    align-items: center; 
 
    background-color: orange; 
 
} 
 
#nav li a { 
 
    color: white; 
 
    margin: 15px; 
 
    padding: 5px; 
 
    display: block; 
 
    ; 
 
    text-decoration: none; 
 
    font-size: 24px; 
 
    font-family: courier; 
 
} 
 
#nav li { 
 
    list-style: none; 
 
} 
 
#nav ul { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-flow: row wrap; 
 
    margin: 0; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
@media all and(max-width: 800px) { 
 
    #nav { 
 
    justify-content: space-around; 
 
    } 
 
} 
 
@media all and (max-width: 500px) { 
 
    #nav { 
 
    flex-flow: column wrap; 
 
    padding: 5px; 
 
    } 
 
    #nav li a { 
 
    flex: 1 100%; 
 
    display: block; 
 
    padding: 5px; 
 
    border-top: 1px solid black; 
 
    border-bottom: 1px solid black; 
 
    } 
 
}

<div id="nav"> 
 
    <ul> 
 
    <li> <a href="#">Calendar </a></li> 
 
    <li> <a href="#">Events </a></li> 
 
    <li> <a href="#">Hours </a></li> 
 
    <li> <a href="#">Contact </a></li> 
 
    <li> <a href="#">About </a></li> 
 
    </ul> 
 
</div>

Answer 1

ul要素のデフォルトのパディングをリセットしてください。

ul { 
    padding-left: 0; 
} 

bodyのデフォルトマージンも必要に応じてリセットします。フレキシボックスの部分については

body { 
    margin: 0; 
} 

、あなたはむしろ#navよりも、#nav ulにdisplay: flex;を設定する必要があります。実際に#navにスタイルを設定する必要はありません。 liがメディアクエリで100％の幅を持つようにする場合は、フレックスアイテムをflex: 1 1 100%;に設定することができます。

@media all and (max-width: 500px) { 
    #nav li { 
    flex: 1 1 100%; 
    padding: 5px; 
    border-top: 1px solid black; 
    border-bottom: 1px solid black; 
    } 
} 

jsFiddle