Articles of flexbox

Limita la larghezza dell’elemento alla larghezza del primo figlio

Ho una situazione piuttosto complicata qui che sto cercando di risolvere solo con i CSS. Fondamentalmente, l’idea è estremamente semplice, ho un .item div che contiene un img e un p . L’immagine non può essere più alta di 320 px, quindi ho aggiunto l’ max-height: 320px , al fine di mantenere le proporzioni, ha […]

max-width non funziona correttamente in flex-box su IE11

In IE11, se definisci una larghezza per un flex-box e un elemento img secondario ha una max-width del 100%, non rispetterà la max-width . Qualcuno ha trovato una soluzione per questo? Funziona in IE10, Chrome e Firefox ma si interrompe per IE11: http://jsfiddle.net/3ky60heq/ .container { display: -ms-flexbox; display: -webkit-flex; display: flex; width: 500px; height: 125px; […]

Flexbox 100% altezza Problema

Ho trovato i seguenti link … ma ancora non mi aiuta … come far funzionare le flexbox nidificate Altezza 100% sul bambino della colonna flexbox Come rendere i bambini flexbox alti al 100% dei loro genitori? Ho bisogno di una pagina intera che sia retriggers, come la seguente immagine: Con l’intestazione e il piè di […]

Griglia flessibile: alternata sinistra e destra

Usando Flexbox : mi piacerebbe mettere una serie di div verticalmente in un div di contenimento, alcuni a destra. Dove ogni div L & R è pari al 70% della larghezza del contenitore div. L div deve essere bloccato sul lato sinistro del contenitore e R div è bloccato sul lato destro del contenitore. L […]

Perché Firefox non sta rispettando l’altezza del div flessibile, ma Chrome lo è?

Questo è meglio illustrato con un semplice esempio. Ho un contenitore con display: flex e flex-direction: column , con un singolo div all’interno con height: 300px e flex: 1 . Chrome esegue il rendering del div nidificato a 300px di altezza, ma Firefox lo rende come una singola riga. Questa è solo una sfumatura tra […]

limite di css3 flexbox 4 articoli per riga larghezza automatica

Come posso ottenerlo usando la flexbox? Attualmente sto usando la tabella ma avvolgo ogni riga di un div per limitarlo a solo 5 elementi. Voglio che tutti gli oggetti siano avvolti in un solo genitore. Ho provato la flexbox ma voglio che la larghezza degli oggetti dipenda dal suo contenuto. Grazie ragazzi. .flexContainer { display: […]

Flexbox CSS che influenza il layout di Bootstrap 3

Sto cercando di creare il layout di seguito in Bootstrap 3. Posso ottenere layout mostrato sotto ‘sm’, e con flexbox voglio scambiare div 1 e 2 per gli schermi xs. Il problema è quando creo il contenitore div a una flexbox, esso spinge giù div 3 sul layout sm, in modo che sia al di […]

Come posizionare gli elementi su una nuova riga, stessa colonna con css-grid?

Il mio contenuto si sta sovrapponendo. Capisco che sia perché ho inserito lo stesso col-start , ma come faccio a far crescere i contenuti div e andare giù nel mezzo della mia griglia css? Dovrei usare Flexbox con la griglia qui? (no Bootstrap per favore) Ecco come appare ora: .mygrid { display: grid; grid-template-columns: repeat(12, […]

tratto della colonna flexbox per adattarsi ai contenuti

Colleghi sviluppatori Goodday, Vorrei creare un contenitore che permetta al contenuto di andare dall’alto verso il basso e da sinistra a destra. Il contenitore genitore deve allungarsi per adattarsi ma entro i valori definiti massimi. Ho usato flexbox per questo scopo, tuttavia non riesco a ottenere il contenitore genitore per adattarlo. Qualcuno ha qualche suggerimento, […]

flex-wrap non funziona nel contenitore flessibile annidato

Mi aspettavo che la casella blu e rossa venisse avvolta quando la larghezza dello schermo è piccola in questo esempio, perché il cyan box è impostato su flex-wrap. Tuttavia, non sta succedendo. Perché non funziona? Ecco il codice: .foo, .foo1, .foo3 { color: #333; text-align: center; padding: 1em; background: #ffea61; box-shadow: 0 0 0.5em #999; […]