Articles of flexbox

Bootstrap 4: Come rendere la riga allungare l’altezza rimanente?

Sto cercando di fare in modo che il container-fluid del container-fluid e la 2a row estendano fino all’altezza rimanente, ma non sono riuscito a trovare il modo di farlo. Ho provato a impostare le align-items/align-self per stretch ma non ha funzionato neanche. Di seguito è la mia struttura del codice: Header Sto usando Bootstrap 4 […]

La flexbox CSS non funziona in IE10

In IE10, questo codice non funziona correttamente: .flexbox form { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; } .flexbox form input[type=submit] { width: 31px; } .flexbox form input[type=text] { width: auto; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex: […]

Bootstrap 4 navbar con 2 file

Ho creato una barra di navigazione con Bootstrap 4 alpha 6 che ha una grande marca / icona a sinistra e 2 navbar-nav con collegamenti a destra dell’icona. Un nav ha dei link e l’altro nav ha delle icone. Funziona esattamente come voglio, tranne che per una cosa. Mi piacerebbe che i 2 navbar appaiano […]

Altezza 100% sul bambino della colonna flexbox

Sto avendo problemi con una colonna flexbox in quanto i bambini dell’elemento flex’d non rispondono height in percentuale. L’ho verificato solo in Chrome e da quello che ho capito è un problema di Chrome. Ecco il mio esempio: HTML CSS .flexbox{ position:absolute; background:black; width:100%; height:100%; display: flex; flex-direction:column; } .flex{ background:blue; flex:1; } .flex-child{ background:red; […]

Crea una griglia in muratura con flexbox (o altri CSS)

Mi piacerebbe ottenere un effetto griglia nei CSS con elementi che hanno tutti la stessa larghezza in dimensioni ma non in altezza. Vorrei che l’elemento sottostante fosse sempre a 50px di quello inferiore, qualunque sia il prossimo. Ho provato con i float, ma quell’errore. Così ho provato con Flex, ma ancora non fa quello che […]

Come cambiare la pellicola flessibile?

Dispongo di una scatola flessibile in grado di reactjs in modo dinamico con tabs renderizzate dynamicmente (da 1-10 carte rese ogni chiamata API) nella mia applicazione. Fa quasi esattamente quello che voglio che faccia, tranne il modo in cui lo avvolge. Diciamo che ho reso 10 carte, se ridimensiono lo schermo in modo che diventi […]

Div scorrevole per attaccare al fondo, quando il div esterno cambia di dimensione

Ecco un esempio di app di chat -> L’idea qui è di avere il .messages-container occupa il più ansible dello schermo. All’interno di .messages-container , .scroll contiene l’elenco dei messaggi e, nel caso in cui vi siano più messaggi, la dimensione dello schermo scorre. Ora, considera questo caso: L’utente scorre fino alla fine della conversazione […]

Centra il contenuto all’interno di una colonna in Bootstrap 4

Ho bisogno di aiuto per risolvere il problema, ho bisogno di centrare il contenuto all’interno della colonna in bootstrap4, si prega di trovare il mio codice qui sotto

Differenza tra display: inline-flex e display: flex

Ho difficoltà a capire la display:inline-flex; della proprietà display:inline-flex; . Qual è la differenza tra display:inline-flex; e display:flex; ? Sto provando ad allineare verticalmente alcuni elementi all’interno del wrapper ID. Ecco perché ho dato la display:inline-flex; della proprietà display:inline-flex; a questo ID; perché il wrapper ID è il contenitore flessibile. Ma non c’è differenza nella […]

Come si riduce il fattore di restringimento flessibile nel padding e nel border-box?

Diciamo che abbiamo un contenitore flessibile con una larghezza di 400 px. All’interno di questo contenitore ci sono tre elementi flessibili: :nth-child(1) { flex: 0 2 300px; } /* flex-grow, flex-shrink, flex-basis */ :nth-child(2) { flex: 0 1 200px; } :nth-child(3) { flex: 0 2 100px; } Quindi la larghezza totale degli elementi flessibili è […]