Articles of flexbox

Perché un bambino flessibile è limitato alle dimensioni del genitore?

Considerando il seguente esempio … body { margin: 0; } * { box-sizing: border-box; } .parent { min-height: 100vh; width: 50vw; margin: 0 auto; border: 1px solid red; display: flex; align-items: center; justify-content: center; } .child { border: 1px solid blue; width: 150%; } Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod […]

Flex margin automatico non funziona in IE10 / 11

Ho un layout complesso in cui centro vari elementi verticalmente e orizzontalmente con flexbox. L’ultimo elemento ha quindi margin-right:auto; applicato per spingere gli elementi a sinistra (e negarli centrandoli). Funziona correttamente ovunque tranne che su IE10 / 11 e mi sta facendo impazzire. Campione HTML / CSS: #container { display: -ms-flexbox; display: -webkit-flex; display: flex; […]

Esiste un polyfill per l’attuale modulo flessibile CSS Layout Module come da W3C CR (display: flex ecc.)?

Flexiejs.com ha il polyfill del browser per i CSS box flessibili, ma si basa su una bozza precedente sull’argomento, che è incompatibile con l’attuale modulo di layout della scatola flessibile CSS raccomandato da Candidati del W3C. Esiste un polyfill, almeno parziale, per le scatole flessibili come definito nel CR?

griglia di quadrati css con flexbox

Sto cercando di creare una griglia retriggers di quadrati. I quadrati devono essere ridimensionati per adattarsi alla larghezza della finestra. I quadrati non devono essere ridimensionati quando si modifica l’altezza del viewport. Ho ottenuto come regolare la larghezza di ogni quadrato, ma non so come rendere gli elementi quadrati e come ridimensionare la loro altezza […]

Come specificare un elemento dopo il quale avvolgere in css flexbox?

Non penso che questo sia ancora parte dello standard della flexbox, ma c’è forse un trucco per suggerire o forzare il wrapping dopo un determinato elemento? Mi piacerebbe rispondere a diverse dimensioni di pagina e racchiudere un elenco in modo diverso senza markup extra, in modo che invece di avere (per esempio) voci di menu […]

firefox overflow-y non funziona con la flexbox nidificata

Ho progettato un layout di altezza 100% larghezza 100% con css3 flexbox, che funziona sia su IE11 (e probabilmente su IE10 se l’emulazione di IE11 è corretta). Ma Firefox (35.0.1), overflow-y non funziona. Come puoi vedere in questa codepen: http://codepen.io/anon/pen/NPYVga firefox non sta rendendo l’overflow correttamente. Mostra una barra di scorrimento html, body { height: […]

Come posso riempire un div con un’immagine mantenendolo proporzionale?

Ho trovato questo thread: come allunghi un’immagine per riempire un mantenendo l’aspect ratio dell’immagine? – Questa non è interamente la cosa che voglio. Ho un div con una certa dimensione e un’immagine al suo interno. Voglio riempire sempre il div con l’immagine, indipendentemente se l’immagine è orizzontale o verticale. E non importa se l’immagine è […]

Bootstrap 4 Navbar e flexbox di riempimento del contenuto

Devo creare un layout in cui una griglia di contenuti deve trovarsi nella pagina intera rimanente, ma il layout ha anche una barra di navigazione. Per fare ciò ho deciso di posizionare la barra di navigazione in un contenitore flessibile e il contenuto di una riga con altezza 100%. Ho bisogno che il contenuto riempia […]

Una griglia con riquadri reattivi

Sto cercando di creare una griglia con quadrati reattivi. Mi sento come se dovessi essere in grado di farlo con il layout Grid CSS, ma avendo problemi a impostare l’altezza di ogni quadrato per essere uguale alla larghezza. Anche avendo problemi a impostare una grondaia tra ogni quadrato. Starei meglio usando la flexbox? Attualmente il […]

Quali sono i valori consentiti della proprietà `display` per un articolo flessibile? (il layout dei bambini di Flex-item è irrilevante)

Tutti i bambini di un contenitore flessibile (designato da display: flex o display: inline-flex ) sono prodotti automaticamente in flex. Non esiste alcuna proprietà di visualizzazione per un articolo flessibile; invece, lo impostiamo su un altro valore, a seconda di come vogliamo che i figli dell’elemento flessibile siano disposti. Quindi, se imposto la display sul […]