グローバルナビの横並びメニューをFlexBoxで均等幅表示する方法

できますよ。

そもそもセンター寄せになっているのはtext-align: centerがあるからです…と思いましたが、本当か確かめるのにサンプル作りました。

サンプル: 親のflexでセンター寄せにしたものを子で左寄せにする | codepen

つまり、

#navi ul {
  text-align: center;
}

こうなっている場合、#naviの中のulはセンター揃えということですから、.sub-menuもulなのでtext-alignが設定してない場合はセンター揃えです。ここにはflexは関係なかろうと思います。

サンプル: 検証のリスト表示 | jsFiddle

サブアイテムに当たるliが右にはみ出しているのは、リストアイテムの構造だからです。上下ともに同じサイズでボックスが形成されていますが、サブメニューの子要素に当たるliにtext-alignを設定していない場合は、やはり最初で設定した値が継承され(上)、text-alignを設定した方はその設定で上書きされて表示されます(下)。

単純にこういうことかと思います。

flexが影響するのは、ulで宣言した場合、liです。仮に.sub-menuでflexにしたとしてもその中のliが影響されるだけで、その中のaタグは無関係ですから、text-align等でいじくることができます。

.menu-item-has-children:hover .sub-menu {
  display: flex;
  flex-flow: row wrap;
  width: 800px;
}

このままではダメですが、仮にこういうのを入れた場合は、サブメニューの子要素は横並びになります。

.menu-item-has-children:hover .sub-menu {
  display: flex;
  flex-flow: column wrap;
  width: 800px;
}

こうすると縦並びになります。それは、.sub-menu(ul)のliが横に並んでいるか、縦に並んでいるかの違いだけで、aタグには関係ないというのはこういうことです。

メニューはaタグ内のテキストですから、「aタグのテキストは親要素のtext-alignの影響を受ける」と言う感じかと思います。プロパティ的に書くと、aタグのデフォルトでは、text-align: inherit;となっていることかと思います。

あぁ、ちょっと勘違いして、メニュー自体をセンターにしたいと思ってサンプルではメニューをセンター寄せにしました。

これを元通りにするには、

#navi .menu(あるいはul) {
  justify-content: center;
}

これを、

#navi .menu(あるいはul) {
  justify-content: flex-start;
}

とするか、justify-content自体を無くせばオリジナル通りです。

検証のサンプルのtext-alignがlに入っていたので、ulに入れなおしたサンプル | jsFiddle

まぁ同じことですけどね。

Hidekichiさん、ご丁寧な回答と説明を有難うございます。

意味は概ね理解ができました。

ご提案いただいたサンプルのほうを何度か試してみたのですが、サブメニュ−のほうが中々左揃えに反映がされません。

CSSに下記を書き込んだのですが、どこかが競合？などしてしまっているのでしょうか？

#navi ul{
display: -webkit-box; /* Android 2~4 */
-webkit-box-pack: justify; /* Android 2~4 */
display: -webkit-flex;
display: -ms-flex;
display: flex; /*フレキシブルボックス*/
text-align: center; /*センタリングは好みで*/
}

#navi ul li{
width: 300px; /*幅は大きめに調節する*/
-webkit-box-flex: 1; /* Android 2~4 */
}

#navi {
    .menu {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        text-align: center;
        li {
            float: none;
            &.menu-item-has-children {
                ul.sub-menu {
                    li {
                        a {
                            text-align: left;
                        }
                    }
                }
            }
        }
    }
}

自分の理解が足りないのかもしれず申し訳ありませんが、ご教示いただけると幸いです。

宜しくお願い致します。

codepenのcss欄にscssとある場合は、わいひらさんの説明通りscssで書かれています。
まぁcssを書くのが面倒だからですけれども(笑)

で、css欄の横にview compiledボタンがあるので、それを押せばcssに変換されます。このことをコンパイルと言うわけです。
変換されたものはcssなので普通に適用できます。まぁ別にコピらなくても、

.sub-menu li {
  text-align: left;
}

ぐらいかと思うんですけどね。もし効かない場合は、.sub-menu li a {…同…} と言う感じでしょうか。
これに付け加えるとしたら、#navi .sub-menu li a {…同…} かなぁと思います。

.sub-menuを上記のように「#naviで半角スペース」と言うように書くと、「#naviの中の」と言うことになりますが、.sub-menuから書き始めると、別に#naviでなくても#testでも.testでもその中に.sub-menuと言うクラスがあると適用されてしまいます。

思わぬ動作を防ぐために、そこだけ適用したい場合は、必ずその親要素(もしくは先祖要素)を指定しておくほうがベターです。.sub-menuとかプラグインとかがもしかしたら使うかも知れないので。

わいひらさん、CSS書き直し（コンパイル）の点、承知致しました。
お手間おかけしてしまっていたようで申し訳ありません。

Hidekichiさん、分かりやすいご説明を有難うございます。

無事に反映がされました、ありがとうございますm(_ _)m

関連してのご質問で申し訳ないのですが、、サブメニューの部分をマウスオーバーした際に、大きく幅が広がっていて（メニューの一項目の横幅以上）、これをメニューの一つの項目内に収めたいのですが、どのようにすれば直るでしょうか？
以下のコードを書き込んでみたのですが、だめでした。

#navi ul li a {
  height: 100%;
  box-sizing: border-box; /*はみ出し防止*/
}

> サブメニューの部分をマウスオーバーした際に、
> 大きく幅が広がっていて…

これは今どのようなスタイルを書いておられるかによって変わるんですが、マウスオーバーした時にとあることから、書かれているソースでは何の変化も起きません。

構造的に、

#navi
  ul //親メニューグループ
    li //その表示ブロック
     a  //メニュー本体
      .sbmenu(ul) //子のメニューグループ
       li  // その表示ブロック
         a  //サブメニュー本体

こういう感じかと思うんですが、書かれたソースは、aの部分両方にかかるわけですけれども、実際.sub-menuはdisplay: none;で非表示になっているかと思います。つまり、見えている部分は、

#navi ul li a {
  height: 100%;
  box-sizing: border-box; /*はみ出し防止*/
}

こうなっているかも知れませんが、非表示の部分はそうはならないのです。書かれているスタイルがやりたいこととして正しいのであれば、

#navi .sub-menu:hover li a {
  //略
}

というような指定をする必要があります。

> 大きく幅が広がっていて（メニューの一項目の横幅以上）、
> これをメニューの一つの項目内に収めたいのですが、
> どのようにすれば直るでしょうか？

ということなので、ここからは想像ですが、

[li]メニュー[/li]
[li]メニュー[/li]
[li]メニュー[/li]

こうなっていて、liの横幅が広いだけであれば、liのwidthを狭めれば良いことになります。

[li]メニュー[/li][li]メニュー[/li][li]メニュー[/li]
このようになっていて横伸びになるのがマズイということであれば、ulの幅を固定する必要があるかと思います。

おそらく前者で、最初の寝ログのリンク先の記事を見ると、

#navi ul li{
  width: 300px; /*幅は大きめに調節する*/
}

という箇所があります。.sub-menu liにwidthがない場合は、この#navi ul liの300が継承されていると思うんです。
考え方として、#navi ul liも#navi .sub-menu liも同じものを指定しています。が表示が異なる(同じでも良いんですが)リストと考えるのが簡単で、親メニューは親メニューの表示、子は子と言うようにリストをワケて考えるほうが簡単です。

よって、

#navi .sub-menu {
  width: 200px;
}

#navi .sub-menu:hover li {
  width: 100%;
}

なら、#navi .sub-menuの幅までしかliは広がりません。つまり、サブメニューのaタグはこの200pxの中でセンタリングされるという具合になります。もしaタグのメニューが長い場合はliの中で折り返しが発生します。

ほぼ想像で書きましたが、こんな感じかと思うんですけれども。

Hidekichiさん、分かりやすい解説とご説明ありがとうございます。

[li]メニュー[/li]
[li]メニュー[/li]
[li]メニュー[/li]

こうなっていて、liの横幅が広いだけであれば、liのwidthを狭めれば良いことになります。

→liのwidth幅が広い状態でしてこれを任意に調節した所、無事に理想のサイズ幅にすることができました。

グローバルメニューの構造を理解したりするのが非常に難しく、色々と困っていたところを大変助かりました。
ありがとうございますm(_ _)m

わいひらさん、URLの点、承知致しました。
次回から、色々カスタマイズをしている場合はURLを付けて質問したいと思います。