Articles of flexbox

Come allineare l’ultima riga / linea sinistra in una linea multipla flexbox

Ho un grosso problema con il layout di flexbox. Costruisco un contenitore con scatole piene di immagini e ho deciso di utilizzare il layout di Flexbox per giustificare il contenuto per renderlo simile a una griglia Lei è il codice: … e il CSS: .container { display: flex; display: -webkit-flex; display: -moz-flex; justify-content: space-around; -webkit-justify-content: […]

Impostare una lunghezza (altezza o larghezza) per un elemento meno la lunghezza variabile di un altro, cioè calc (x – y), dove y è sconosciuto

So che possiamo usare calc quando le lunghezze sono definite: flex-basis: calc(33.33% – 60px); left: calc(50% – 25px); height: calc(100em/5); Ma cosa succede se una lunghezza è variabile? height: calc(100% – <>); O width: calc(100% – 50px – <>); C’è un modo standard per farlo in CSS? So che il compito generale è ansible con […]

Padding-bottom / top nel layout della flexbox

Ho un layout della confezione flessibile contenente due elementi. Uno di questi utilizza il fondo di riempimento : #flexBox { border: 1px solid red; width: 50%; margin: 0 auto; padding: 1em; display: flex; flex-direction: column; } #text { border: 1px solid green; padding: .5em; } #padding { margin: 1em 0; border: 1px solid blue; padding-bottom: […]

Allineare gli elementi della griglia sull’intera riga / colonna (come gli oggetti flessibili possono)

Con un contenitore flessibile e flex-wrap: wrap set flex-wrap: wrap consente di allineare al centro gli oggetti in eccesso utilizzando il justify-content: center . C’è un modo per ottenere lo stesso comportamento per gli oggetti della griglia in eccesso utilizzando la griglia CSS? Ho creato una penna che mostra il comportamento di flex desiderato .container-flex […]

Modello di box flessibile – display: flex, box, flexbox?

Molti di noi sono consapevoli che i vecchi valori della proprietà display come inline e block sono obsoleti dopo che il nuovo modello di box flessibile è stato introdotto in CSS3. Ma potremmo trovare diverse informazioni sul web nello stesso modello di box flessibile. Potremmo trovare principalmente 3 diversi valori della proprietà display , ovvero […]

Righe di altezza uguale nel layout griglia CSS

Considero che questo è imansible da ottenere usando Flexbox, poiché ogni riga può essere solo l’altezza minima richiesta per adattarsi ai suoi elementi, ma questo può essere ottenuto utilizzando la nuova griglia CSS? Per essere chiari, voglio un’altezza uguale per tutti gli elementi in una griglia su tutte le righe, non solo per ogni riga. […]

Qual è la differenza tra il contenuto di allineamento e gli elementi di allineamento?

Qualcuno può mostrarmi la differenza tra gli align-items align-content ?

Un modo migliore per impostare la distanza tra gli elementi della flexbox

Per impostare la distanza minima tra gli elementi della flexbox sto usando il margin: 0 5px su .item e margin: 0 -5px sul contenitore. Per me sembra un trucco, ma non riesco a trovare un modo migliore per farlo. Esempio #box { display: flex; width: 100px; margin: 0 -5px; } .item { background: gray; width: […]

Impostare i bambini della Flexbox per avere altezze diverse per utilizzare lo spazio disponibile

Usando un layout a due colonne, come possono essere realizzati bambini di dimensioni diverse per riempire tutto lo spazio disponibile, invece di tutti i bambini che hanno l’altezza del figlio più alto della fila? Ho creato una demo su jsbin che illustra il problema. Mi piacerebbe che tutti i bambini fossero delle dimensioni dei loro […]

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 […]