navメニュー その1

nav {
    max-width: 900px;
    margin: 0 auto;

    border: 1px solid red;
}

ul {
    list-style: none;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;

    padding: 5px;
}

li {
    flex-grow: 1;
}

li:not(:last-child) {
    border-right: 1px solid #ccc;  /* 各項目の間に縦線を引く */
}


a {
    text-align: center;

    display: inline-block;
    width: 100%;
    height: 50px;

    line-height: 50px; /* 上下中央(テキストが1行のときのみ) */
}

@media(max-width: 670px) {
    ul {
        flex-wrap: wrap;
    }

    li {
        width: 50%;
        border-bottom: 1px solid #ccc;
    }

    li:not(:last-child) {
        border-right: none;
    }

    li:nth-child(odd) {
        border-right: 1px solid #ccc;
    }

    a {
        height: 30px;
        line-height: 30px;
    }
}