フレックスボックス6列幅が同じ

Question

フレックスボックスは初めてですが、それを使って6列の応答性の高いナビゲーションメニューを作成できると考えました。私は画面が100％伸びるという問題がありますが、ほとんどの場合、ボタンの幅は同じではありません。画面幅に合わせて幅を同じにすることができます？サイズやフォントサイズ

は、コードのため、この参照してください：JS Fiddle

.cat-bg { 
    display: flex; 
} 
.showSingle { 
    flex-grow: 1; 
    max-width: 30%; 
    float: left; 
    cursor: pointer; 
    cursor: hand; 
    display: block; 
} 

Answer 1

だけ.showSingleにflex-basis: 0;を追加することによりdefaul

https://jsfiddle.net/3mgr14v4/

Answer 2

を。曲げられたオブジェクトは、その内容に従ってサイズが変更されます。これを変更するには、flex-basisプロパティを調整します。あなたのケースでは、あなたはこのように同じサイズの列/ボタンをすべて行うことができます：

.showSingle { 
    flex: 1; 
} 

（代わりにflex-grow: 1のは）また、あなたがfloatとdisplay文を削除する必要があることに注意を、との1 2つのcursorステートメント。したがって、これらの要素のための最終的なCSSは次のようになります。それは価値がある何のため

.cat-bg { 
    display: flex; 
} 

.showSingle { 
    flex: 1; 
    max-width: 30%; 
    cursor: pointer; 
} 

が、この場合は速記flexプロパティは、次のと等価です：

flex-grow: 1; 
flex-shrink: 1; 
flex-basis: 0%; 

Answer 3

私はそれを修正する方法を見つけたと思います：

.cat-bg { 
max-width: 100%; 
    margin: 0 auto; 
    display: flex; 
} 
.showSingle { 
    flex-grow: 1; 
    flex-shrink: 1; 
    flex-basis: 0; 
    cursor: pointer; 
    cursor: hand; 
    display: block; 
} 

Answer 4

使用この

.cat-bg { 
    display: flex; 
    padding:10px; 
    flex-wrap:wrap; 
} 
.showSingle { 
    flex-basis:100px; 
    cursor: pointer; 
    cursor: hand; 

}