Quali sono le differenze tra flex-base e larghezza?

Ci sono state domande e articoli a riguardo, ma nulla di conclusivo per quanto posso dire. Il miglior riassunto che ho potuto trovare è

flex-base ti permette di specificare la dimensione iniziale / iniziale dell'elemento, prima di calcolare qualsiasi altra cosa. Può essere una percentuale o un valore assoluto.

... che di per sé non dice molto sul comportamento degli elementi con un set a base flessibile . Con la mia attuale conoscenza di flexbox non vedo perché anche questo non possa descrivere la larghezza .

Mi piacerebbe sapere come esattamente la base flessibile sia diversa dalla larghezza in pratica:

• Se sostituisco larghezza con flex-base (e viceversa), cosa cambierà visivamente?
• Cosa succede se imposto entrambi su un valore diverso? Cosa succede se hanno lo stesso valore?
• Ci sono alcuni casi speciali in cui l'utilizzo della larghezza o della base flessibile avrebbe una differenza significativa rispetto all'uso dell'altro?
• In che modo la larghezza e la base flessibile differiscono quando utilizzate insieme ad altri stili di flexbox, come flex-wrap , flex-grow e flex-shrink ?
• Altre differenze significative?

Modifica / chiarimento : questa domanda è stata posta in un formato diverso in Cosa imposta esattamente la proprietà flex-base? ma ho pensato che un confronto o un riassunto più diretto delle differenze di base flessibile e larghezza (o altezza ) sarebbe stato bello.

Tener conto di flex-direction

La prima cosa che mi viene in mente quando leggi la tua domanda è che flex-basisnon sempre si applica width.

Quando flex-directionè row, flex-basiscontrolla la larghezza.

Ma quando lo flex-directionè column, flex-basiscontrolla l'altezza.

Differenze chiave

Ecco alcune importanti differenze tra flex-basise width/ height:

• flex-basissi applica solo agli articoli flessibili. I contenitori flessibili (che non sono anche oggetti flessibili) ignoreranno flex-basisma possono usare widthe height.

• flex-basisfunziona solo sull'asse principale. Ad esempio, se ci si trova flex-direction: column, la widthproprietà sarebbe necessaria per ridimensionare gli oggetti flessibili in orizzontale.

• flex-basisnon ha alcun effetto sugli oggetti flex posizionati in modo assoluto. widthe le heightproprietà sarebbero necessarie. Gli oggetti flessibili posizionati in modo assoluto non partecipano al layout flessibile .

• Usando il flexproprietà, tre proprietà - flex-grow, flex-shrinke flex-basis- possono essere combinati in un unico ordinatamente dichiarazione. Utilizzando width, la stessa regola richiederebbe più righe di codice.

Comportamento del browser

In termini di come vengono resi, non ci dovrebbero essere differenze tra flex-basise width, a meno che non flex-basissia autoo content.

Dalle specifiche:

7.2.3. La flex-basisproprietà

Per tutti i valori diversi da autoe content, flex-basisviene risolto allo stesso modo widthdelle modalità di scrittura orizzontale.

Ma l'impatto di autoo contentpuò essere minimo o nulla. Altro dalle specifiche:

auto

Se specificato su un articolo flessibile, la autoparola chiave recupera il valore della proprietà della dimensione principale come utilizzato flex-basis. Se quel valore è esso stesso auto, allora è il valore usato content.

content

Indica il dimensionamento automatico, in base al contenuto dell'articolo flessibile.

Nota: questo valore non era presente nella versione iniziale di Flexible Box Layout e pertanto alcune implementazioni precedenti non lo supporteranno. L'effetto equivalente può essere ottenuto utilizzando autoinsieme a una dimensione principale ( widtho height) di auto.

Quindi, secondo le specifiche, flex-basise widthrisolvi in ​​modo identico, a meno che non flex-basissia autoo content. In tali casi, flex-basispuò utilizzare la larghezza del contenuto (che, presumibilmente, la widthproprietà userebbe anche).

Il flex-shrinkfattore

È importante ricordare le impostazioni iniziali di un contenitore flessibile. Alcune di queste impostazioni includono:

• flex-direction: row - gli oggetti flessibili si allineeranno orizzontalmente
• justify-content: flex-start - gli oggetti flessibili verranno impilati all'inizio della linea sull'asse principale
• align-items: stretch - gli articoli flessibili si espandono per coprire le dimensioni trasversali del contenitore
• flex-wrap: nowrap - gli oggetti flessibili sono costretti a rimanere su una sola riga
• flex-shrink: 1 - un articolo flessibile può restringersi

Nota l'ultima impostazione.

Poiché gli elementi flessibili possono restringersi per impostazione predefinita (il che impedisce loro di traboccare il contenitore), il flex-basis/ width/ specificato heightpotrebbe essere ignorato.

Ad esempio, flex-basis: 100pxo width: 100px, accoppiato con flex-shrink: 1, non sarà necessariamente 100px.

Per eseguire il rendering della larghezza specificata - e mantenerla fissa - dovrai disabilitare la riduzione:

div {
   width: 100px;
   flex-shrink: 0;
}  

O

div {
  flex-basis: 100px;
  flex-shrink: 0;
}

OPPURE, come raccomandato dalle specifiche:

flex: 0 0 100px;    /* don't grow, don't shrink, stay fixed at 100px */

7.2. Componenti di flessibilità

Gli autori sono incoraggiati a controllare la flessibilità utilizzando la flexstenografia anziché direttamente con le sue proprietà di stenografia, poiché la stenografia reimposta correttamente qualsiasi componente non specificato per adattarsi agli usi comuni .

Bug del browser

Alcuni browser hanno problemi a dimensionare gli oggetti flessibili in contenitori flessibili nidificati.

flex-basisignorato in un contenitore flessibile nidificato. widthlavori.

Durante l'utilizzo flex-basis, il contenitore ignora il dimensionamento dei relativi figli e i bambini traboccano del contenitore. Ma con la widthproprietà, il contenitore rispetta il dimensionamento dei suoi figli e si espande di conseguenza.

Riferimenti:

• Chrome non espande il genitore flessibile in base al contenuto dei bambini
• Elemento flessibile traboccante quando si utilizza la base flessibile
• Differenza tra larghezza e base flessibile
• La base flessibile viene ignorata quando si dimensionano contenitori flessibili nidificati.
• flex-base: 100px fa qualcosa di diverso dalla larghezza: 100px + flex-base: auto

Esempi:

• https://jsfiddle.net/t419zhra/ (fonte: @Dremora )
• https://codepen.io/anon/pen/NVxaoy (fonte @Daniel )
• https://jsfiddle.net/voc9grx6/ (fonte: Chromium Bugs )
• https://jsfiddle.net/qjpat9zk/ (fonte: Chromium Bugs )

flettere gli oggetti usando flex-basise white-space: nowraptraboccare il inline-flexcontenitore. widthlavori.

Sembra che un contenitore flessibile impostato su inline-flexnon riconosca flex-basisun bambino durante il rendering di un fratello white-space: nowrap(anche se potrebbe essere solo un elemento con larghezza indefinita). Il contenitore non si espande per contenere gli articoli.

Ma quando widthviene utilizzata la proprietà anziché flex-basis, il contenitore rispetta il dimensionamento dei propri figli e si espande di conseguenza. Questo non è un problema in IE11 e Edge.

Riferimenti:

• la larghezza del contenitore flessibile in linea non aumenta
• Il contenitore flessibile in linea (display: inline-flex) sta espandendo l'intera larghezza del contenitore principale

Esempio:

• https://jsfiddle.net/p18h0jxt/1/ (dal primo post sopra)

flex-basis(e flex-grow) non funziona sull'elemento tabella

Riferimenti:

• Perché il flex-box funziona con un div, ma non con un tavolo?
• Perché flex-grow: 1 funziona per un tavolo in Safari? (e Edge)

flex-basisfallisce in Chrome e Firefox quando il contenitore del nonno è un elemento di adattamento. La configurazione funziona bene in Edge.

• Contenitore posizionato in modo assoluto che non espande la larghezza per adattarsi al contenuto di flexbox

Come nell'esempio presentato nel link sopra, anche position: absolutel'uso di floate inline-blockrenderà lo stesso output difettoso ( jsfiddle demo ).

Bug che interessano IE 10 e 11:

• flexle dichiarazioni stenografiche con flex-basisvalori senza unità vengono ignorate
• flex-basis non tiene conto box-sizing: border-box
• flex-basis non supporta calc()
• L'importanza viene ignorata flex-basisquando si utilizza la flexscorciatoia

Oltre all'eccellente riepilogo di Michael_B, vale la pena ripetere questo:

flex-base ti consente di specificare la dimensione iniziale / iniziale dell'elemento, prima di calcolare qualsiasi altra cosa. Può essere una percentuale o un valore assoluto.

La parte importante qui è iniziale .

Di per sé, questo si risolve in larghezza / altezza fino a quando non entrano in gioco le altre proprietà di ingrandimento / restringimento del flex.

Così. un bambino con

.child {
 flex-basis:25%;
 flex-grow:1;
}

inizialmente avrà una larghezza del 25% ma poi si espanderà immediatamente il più possibile fino a quando gli altri elementi non verranno presi in considerazione. Se non ce ne sono, sarà largo / alto al 100%.

Una breve demo:

.flex {
  width: 80%;
  margin: 1em auto;
  height: 25px;
  display: flex;
  background: rebeccapurple;
}
.child {
  flex-basis: auto;
  /* default */
  background: plum;
}
.value {
  flex-basis: 25%;
}
.grow {
  flex-grow: 1;
}

<div class="flex">
  <div class="child auto">Some Content</div>
</div>
<div class="flex">
  <div class="child value">Some Content</div>
</div>
<div class="flex">
  <div class="child grow">Some Content</div>
</div>

Sperimentare con flex-grow, flex-shrinke flex-basis (o la stenografia flex :fg fs fb) ... può portare ad alcuni risultati interessanti.

Forse il punto più importante da aggiungere:

Cosa succede se il browser non supporta flex? In tal caso, width/heightsubentra e si applicano i loro valori.

È una buona idea, quasi essenziale, definire gli width/heightelementi, anche se hai un valore completamente diverso per flex-basis. Ricorda di provare disabilitando display:flexe vedendo quello che ottieni.