Articles of flexbox

Estendi un elemento oltre il contenitore di bootstrap

Attualmente sto lavorando a uno dei mockup con l’utilizzo di Bootstrap 4 e c’è un elemento insolito all’interno del contenitore, che lo sfondo sta estendendo oltre il contenitore. Non sei sicuro di come esattamente questa cosa dovrebbe essere fatta. Stavo cercando di implementarlo con la posizione: assoluto, ma non ne sono un fan a causa […]

Menu orizzontale completamente giustificato con immagini e separatori

Mi piacerebbe ottenere questo menu orizzontale pienamente giustificato: La giustificazione è fatta con la flexbox e funziona, ma non ho potuto giustificare anche i punti intermedi di separazione; sono realizzati usando il contenuto css tramite pseudo-class. Inoltre, mi chiedo se ci sia un modo migliore per centrare verticalmente gli oggetti piuttosto che fingere aggiungendo un […]

La barra laterale di Flexbox ferma il contenuto principale dall’involgimento sotto la barra laterale su schermi piccoli

Ho una barra laterale con contenuto principale che funziona benissimo … il problema è che per il contenuto principale sto usando la class bootstrap .container . Comportamento attuale Quando ridimensiono la mia pagina, il contenuto principale viene visualizzato sotto la mia barra laterale. Comportamento desiderato Voglio che il container si riduca in modo che la […]

Layout di Flexbox che irrompe in IE 11. I prefissi non funzionano?

Ho un layout di scheda materiale che sto usando Flexbox per e funziona bene in Chrome / FF / Safari. Ho usato Flexbox prima con successo a IE10 usando solo autoprefixer, ma per qualche ragione ho solo una pausa in IE11. I miei obiettivi di layout sono di avere le carte come nella penna che […]

Centratura di un elenco in Bootstrap CSS

Modifica dopo il rapporto duplicato Scuse Credo che il duplicato suggerito possa effettivamente essere un duplicato. Ho provato prima e non ha funzionato per me quindi una nuova domanda. Avendo guardato di nuovo con la nuova risposta suggerita, mi rendo conto che i miei problemi sono probabilmente con le impostazioni predefinite dello strumento che sto […]

Comprensione della proprietà flex

Perché, in questo esempio, l’elemento .main (blu) divide lo spazio solo con .aside-1 (giallo) e .aside-2 (rosa), e non con tutti gli elementi? Abbiamo un wrapper che sta mettendo tutti gli elementi che occupano una riga. In .main diciamo flex: 3 0px , che secondo me dice, questo elemento sarà 3 volte più grande degli […]

altezza: 100% non funziona all’interno della flexbox con flex-grow

La scatola blu dovrebbe essere alta al 100%. Funziona quando imposto l’altezza di un pixel per div.a , ma sfortunatamente questa non è un’opzione per il caso del mondo reale. Questo probabilmente spiega tutto: http://codepen.io/anon/pen/jrVEpB .a{ background-color:red; display:flex; } .b1{ flex-grow:0; background-color:green; } .b2{ flex-grow:1; background-color:yellow; height:100%; } .c{ height:100%; background-color:blue; } hurr durr hurr […]

Passaggio da layout verticale a orizzontale in flexbox

Voglio realizzare il seguente layout con flexbox: Puoi vedere entrambi gli orientamenti nella foto. Lato sinistro per la vista verticale e sul lato destro per la vista orizzontale. La premessa è che voglio mantenere il mio html il più breve ansible (se è ansible). C’è un modo per farlo con flex? Nella vista verticale tutto […]

Più colors di sfondo in flexbox scorrevole

Ho un flexbox ( flex-direction: row ) con 2 colonne di contenuto e un’altezza fissa. Voglio che la colonna sinistra e quella destra abbiano rispettivamente uno sfondo rosso e uno blu. In caso di overflow di una delle due colonne, flexbox visualizzata la barra di scorrimento del flexbox (la parte in overflow è ancora rossa […]

Spazio del mistero creato sopra la riga quando si rimuove il contenuto all’interno di un object

Ho una griglia con alcuni elementi e quando faccio clic su un elemento sposto il contenuto di quell’elemento in una modale. Il modale funziona alla grande, ma quando rimuovo il contenuto dall’elemento, sopra l’object appare uno spazio. So che un modo per aggirare questo problema potrebbe essere l’utilizzo di un flexbox, che funziona bene, ma […]