Flexbox 6 Spalten mit gleicher Breite

Question

Ich bin Flexbox neu, dachte aber, ich könnte damit ein reaktionsfähiges Navigationsmenü mit 6 Spalten erstellen. Das Problem, das ich habe, ist, dass es 100% des Bildschirms streckt, aber in den meisten Fällen sind die Breiten der Tasten nicht gleich. Gibt es eine Möglichkeit, dass ich die Tasten gleiche Breite haben und immer noch basierend auf Bildschirm reagieren kann ? Größe und Schriftgröße

für Code dazu siehe: JS Fiddle

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

Answer 1

Gerade flex-basis: 0; zu .showSingle hinzufügen

https://jsfiddle.net/3mgr14v4/

Answer 2

von defaul. t, flex'ed Objekte werden entsprechend ihrem Inhalt sortiert. Sie können dies ändern, indem Sie die Eigenschaft flex-basis anpassen. In Ihrem Fall können Sie alle Spalten/Tasten die gleiche Größe wie diese machen:

.showSingle { 
    flex: 1; 
} 

(statt flex-grow: 1)

Beachten Sie auch, dass Sie die float und display Aussagen entfernen sollte, und einer von die beiden cursor Aussagen. So Ihre endgültige CSS für diese Elemente sein:

.cat-bg { 
    display: flex; 
} 

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

Für das, was es wert ist, die Stenografie flex Eigenschaft in diesem Fall entspricht der folgenden:

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

Answer 3

Ich glaube, ich fand, wie es zu korrigieren :

.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

Verwendung dieses

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

}