Come rendere gli elementi Flexbox della stessa dimensione?

Voglio usare la flexbox che ha un numero di elementi tutti della stessa larghezza. Ho notato che la flexbox distribuisce lo spazio in modo uniforme, piuttosto che lo spazio stesso.Come rendere gli elementi Flexbox della stessa dimensione?

Ad esempio:

.header { 
 
    display: flex; 
 
} 
 

 
.item { 
 
    flex-grow: 1; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
}

<div class="header"> 
 
    <div class="item">asdfasdfasdfasdfasdfasdf</div> 
 
    <div class="item">z</div> 
 
</div>

Il primo elemento è molto più grande rispetto al secondo. Se ho 3 articoli, 4 articoli o n elementi, voglio che compaiano tutti sulla stessa riga con una quantità uguale di spazio per articolo.

Qualche idea?

http://codepen.io/anon/pen/gbJBqM

fonte

2015-04-07 Chet

impostarli in modo che la loro flex-basis è 0 (in modo che tutti gli elementi hanno lo stesso punto di partenza), e consentire loro di crescere:

flex: 1 1 0

fonte

2015-04-07 23:35:47 Adam

Si potrebbe aggiungere flex-basis: 100% per raggiungere questo obiettivo .

Updated Example

.header { 
    display: flex; 
} 

.item { 
    flex-basis: 100% 
    text-align: center; 
    border: 1px solid black; 
}

Per quello che vale, si potrebbe anche usare flex: 1 per gli stessi risultati pure.

La scorciatoia del flex: 1 è la stessa di flex: 1 1 0, che è equivalente a:

.item { 
    flex-grow: 1; 
    flex-shrink: 1; 
    flex-basis: 0; 
    text-align: center; 
    border: 1px solid black; 
}

fonte

2015-04-07 23:35:58

Questo non è corretto. Il valore di flex predefinito è 'flex: 0 1 auto'. Il che significa che l'impostazione 'flex: 1' darà come risultato' flex: 1 1 auto'. Questo non funzionerà. La risposta corretta è 'flex: 1 1 0' come indicato sopra per Adam –

@ r.sendecky No, sei tu che non sei corretto. Come ho affermato nella mia risposta, la scorciatoia di 'flex: 1' risulta in' flex: 1 1 0' ** non ** 'flex: 1 1 auto' come si sta rivendicando. Date un'occhiata alle specifiche ufficiali W3 nella sezione ['flex shorthand'] (https://www.w3.org/TR/css-flexbox-1/#flex-property): quando 'flex-base' è" omesso dalla scorciatoia flex, il suo valore specificato è '0'", non 'auto'. Grazie per il downvote casuale. –

@ r.sendecky - Dai un'occhiata anche a [questo esempio] (https://jsfiddle.net/o25wto2d/) che ho creato per visualizzare le varianti. –

larghezza Aggiunta: 0 aiutato a risolvere il problema

.item { 
     flex-grow: 1 1 0; 
     width: 0; 
    }

ecco il link che aiutano a risolvere il mio problema: Always equal flexbox columns

fonte

2017-11-16 06:59:28

Questo sembra essere necessario se il contenuto di '.item' lo fa diventare più largo di quanto' .item' sarebbe naturalmente. – Bungle

Come rendere gli elementi Flexbox della stessa dimensione?

risposta

Problemi correlati