Come impostare una colonna a larghezza fissa con flexbox CSS

149

CodePen: http://codepen.io/anon/pen/RPNpaP .

Voglio che la casella rossa sia larga solo 25 em quando è nella vista affiancata - Sto cercando di raggiungere questo obiettivo impostando il CSS all'interno di questa query multimediale:

@media all and (min-width: 811px) {...}

per:

.flexbox .red {
  width: 25em;
}

Ma quando lo faccio, succede:

http://i.imgur.com/niFBrwt.png

Hai idea di cosa sto facendo di sbagliato?

html css flexbox

— Scienza
fonte

335

È necessario utilizzare la proprietà flexo flex-basisanziché width. Ulteriori informazioni su MDN .

.flexbox .red {
  flex: 0 0 25em;
}

La flexproprietà CSS è una proprietà abbreviata che specifica la capacità di un elemento flessibile di modificare le sue dimensioni per riempire lo spazio disponibile. Contiene:

flex-grow: 0;     /* do not grow   - initial value: 0 */
flex-shrink: 0;   /* do not shrink - initial value: 1 */
flex-basis: 25em; /* width/height  - initial value: auto */

Una semplice demo mostra come impostare la prima colonna su 50pxlarghezza fissa.

Mostra snippet di codice

.flexbox {
  display: flex;
}
.red {
  background: red;
  flex: 0 0 50px;
}
.green {
  background: green;
  flex: 1;
}
.blue {
  background: blue;
  flex: 1;
}

<div class="flexbox">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

Espandi frammento

Vedi il codice aggiornato in base al tuo codice.

— Adesivi
fonte

22

Non avevo capito che dovevo scavalcare flex-shrink, grazie, buona risposta.

— Paul Redmond,

Impossibile ottenere una base flessibile: auto funziona fino a quando non ho realizzato che la griglia della mia libreria di componenti (Semantic UI React) aveva una regola css errata che impostava la

— Roman Scher

1

Nel caso in cui qualcuno desideri avere un flexbox reattivo con percentuali (%), è molto più facile per le query multimediali.

flex-basis: 25%;

Questo sarà molto più fluido durante i test.

// VARIABLES
$screen-xs:                                         480px;
$screen-sm:                                         768px;
$screen-md:                                         992px;
$screen-lg:                                         1200px;
$screen-xl:                                         1400px;
$screen-xxl:                                        1600px;

// QUERIES
@media screen (max-width: $screen-lg) {
    flex-basis: 25%;
}

@media screen (max-width: $screen-md) {
    flex-basis: 33.33%;
}

— chris_r
fonte