HTML / CSS

FLEXBOX フレックスボックス グローバルナビ 自動幅調整

/* フレックスボックスナビ */
/* GMENUの部分を任意に変更 */

.GMENU {
display: -webkit-box; /* Android 2~4 */
-webkit-box-pack: justify; /* Android 2~4 */
display: -webkit-flex;
display: -ms-flex;
display: flex; /*フレキシブルボックス*/
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; /*子要素の折り返し設定*/
text-align: center; /*センタリングは好みで*/
}

.GMENU li {
-webkit-box-flex: 1; /* Android 2~4 */
width: 20%; /*グローバルナビの幅に合わせて調節*/
}