Articles of flexbox

Come adattare le dimensioni dello sfondo e del livello di primo piano utilizzando la flexbox CSS

Nella mia app Web, ho uno sfondo e un livello di sovrapposizione, entrambi possono crescere, e se uno di loro cresce, l’altro dovrebbe crescere alla stessa dimensione. In altre parole: ho una pila di elementi HTML e le loro dimensioni dovrebbero essere sincronizzate, seguendo l’elemento più grande. C’è un modo per farlo con un semplice […]

Altezza degli elementi flessibili non fissi

Ho una pagina con tre righe dall’alto al basso, fissa l’intestazione di altezza (100px) nella parte superiore e correggi l’altezza del piè di pagina (100px) nella parte inferiore, il centro occupa l’altezza di rest. la demo è qui: http://jiazhengblog.com/test/flex-study.html Il risultato è quello che mi aspettavo. Ma dopo aver aggiunto alcuni contenuti nella riga centrale, […]

Difficoltà nella progettazione di biglietti da visita tramite CSS

Sto cercando di creare un biglietto da visita con nome e titolo al centro e l’e-mail e il telefono si trovano nell’estrema sinistra e nella parte destra della carta Ecco il mio codice seguente .business-card{ position:relative; border:1px solid black; width:200px; } .business-card section { display:flex; flex-flow:column; align-items:center; } .email{ position:absolute; right:0; } name:abc title:xyz 123-123-123 […]

Bulma: come posso definire l’ordine di stack sui dispositivi mobili

Sto prendendo il framework Bulss flexbox css per un giro – finora è abbastanza carino! L’unico ostacolo che ho trovato è che non riesco a impostare l’ordine di visualizzazione per i dispositivi mobili. Foo Bar // Would like this to be first on small deviecs MODIFICARE Ecco come appare il mio css: body, html { […]

La funzione ridimensionabile per l’altezza della riga della flexbox utilizzando JavaScript vaniglia provoca la visualizzazione nella riga sottostante per modificare le dimensioni

Ho 3 div di fila in un contenitore di flexbox, ogni div di riga contiene almeno 1 vista. Ho aggiunto una maniglia di ridimensionamento per l’altezza di row1 e row2 in blu. Ridimensiona correttamente l’altezza di row1 ma finisce con l’altezza di row3 che non desidero. Perché influenza l’altezza della riga 3 e come posso […]

In che modo gli elementi Div possono prendere solo lo spazio del loro contenuto interno in una Flexbox CSS3?

Ho la seguente struttura HTML: Speichern Style Speichern Il mainPanel contiene tre elementi. L’elemento al centro dovrebbe essere sempre al centro come mostrato qui: Ecco il codice CSS che uso .indicator { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: absolute; width: 150px; height: 50px; border-right: 1px solid red; z-index: -10; } .mainPanel { width: 300px; […]

Le immagini CSS Flexbox non conservano le proporzioni

Sto cercando di imparare a usare Flexbox. Ho una pagina con due immagini separate da una barra al centro, impilate dall’alto in basso. Voglio che la barra rimanga della stessa dimensione indipendentemente dal browser e che le due immagini vengano ridimensionate quando il browser si restringe (mantenendo le dimensioni originali dell’immagine se c’è spazio extra. […]

Centra orizzontalmente e verticalmente il testo su un’immagine HTML (posizionamento assoluto)

Dato il seguente elemento di progettazione, sto tentando di includere le immagini in html in modo che l’opacità possa essere manipolata con transizioni css (effetto hover). Ecco la mia soluzione finora: http://codepen.io/roachdesign/pen/VeQKJK/ Il principale svantaggio è che sto usando un centraggio verticale manuale (assoluto / superiore: 40%), che diventa evidente quando si riduce il browser. […]

Larghezza della Flexbox spezzata in IE

Ho una lista di oggetti. Ogni elemento dell’elenco contiene un pulsante di opzione di una larghezza sconosciuta e un elenco a discesa che vorrei occupare del resto della larghezza del contenitore. Il mio codice funziona in Chrome, ma non in IE11. Qualche idea su cosa sto facendo male? HTML: …code for radio button… …options… E […]

Flettere gli oggetti traboccanti di container in Safari

Per qualche motivo, gli elementi flessibili non rimangono all’interno del contenitore in Safari. Ecco come appare il layout in Chrome e Firefox: Ecco come appare in Safari: Ecco il mio codice: #div1 { background: black; width: 250px; height: 600px; display: flex; flex-direction: column; padding-bottom: 5px } #div2 { background: pink; color: #FFF; width: 240px; height: […]