Domande taggate «flexbox»

Modulo CSS per layout flessibili che offre una vasta gamma di opzioni per allineare gli elementi eliminando la necessità di float e tabelle.

30
Modo migliore per impostare la distanza tra gli oggetti flexbox
Per impostare la distanza minima tra gli elementi Flexbox sto usando margin: 0 5pxsu .iteme margin: 0 -5pxsul 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: …
781 css  flexbox 
12
Come allineare a destra l'elemento flessibile?
Esiste un modo più flessibile di allineare il "contatto" rispetto all'utilizzo position: absolute? .main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c { position: absolute; right: 0; } <h2>With title</h2> <div class="main"> <div class="a"><a href="#">Home</a></div> …
682 html  css  flexbox 
5
Nel CSS Flexbox, perché non ci sono proprietà "justify-items" e "justify-self"?
Considera l'asse principale e l'asse trasversale di un contenitore flessibile: Fonte: W3C Per allineare gli elementi flessibili lungo l'asse principale esiste una proprietà: justify-content Per allineare gli elementi flessibili lungo l'asse trasversale ci sono tre proprietà: align-content align-items align-self Nell'immagine sopra, l'asse principale è orizzontale e l'asse trasversale è verticale. …
12
Flexbox: centrare orizzontalmente e verticalmente
Come centrare div orizzontalmente e verticalmente all'interno del contenitore usando flexbox. Nell'esempio seguente, desidero ogni numero uno sotto l'altro (in righe), che sono centrati orizzontalmente. .flex-container { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; justify-content: center; } row { width: 100%; } .flex-item { background: tomato; padding: …
672 html  css  flexbox 
10
Come posso rendere Flexbox i bambini al 100% di altezza dei loro genitori?
Sto cercando di riempire lo spazio verticale di un oggetto flessibile all'interno di un Flexbox. .container { height: 200px; width: 500px; display: flex; flex-direction: row; } .flex-1 { width: 100px; background-color: blue; } .flex-2 { position: relative; flex: 1; background-color: red; } .flex-2-child { height: 100%; width: 100%; background-color: green; …
459 css  flexbox 
8
Come allineare verticalmente il testo all'interno di una flexbox?
Vorrei usare la flexbox per allineare verticalmente alcuni contenuti all'interno di un <li>ma senza avere un grande successo. Ho controllato online e molti tutorial usano effettivamente un div wrapper che ottiene le align-items:centerimpostazioni flex sul genitore, ma mi chiedo è possibile ritagliare questo elemento aggiuntivo? Ho scelto di usare flexbox …
425 html  css  flexbox 
18
Come allineare 3 div (sinistra / centro / destra) all'interno di un'altra div?
Voglio avere 3 div allineati all'interno di un div container, qualcosa del genere: [[LEFT] [CENTER] [RIGHT]] Il div del contenitore è largo al 100% (nessuna larghezza impostata) e il div del centro dovrebbe rimanere al centro dopo il ridimensionamento del contenitore. Quindi ho impostato: #container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{margin:0 auto;width:100px;} Ma …
27
Scatola flessibile: allinea l'ultima riga alla griglia
Ho un semplice layout a scatola flessibile con un contenitore come: .grid { display: flex; flex-flow: row wrap; justify-content: space-between; } Ora voglio che gli elementi nell'ultima riga siano allineati con l'altro. justify-content: space-between;dovrebbe essere usato perché la larghezza e l'altezza della griglia possono essere regolate. Attualmente sembra Qui, voglio …
379 css  flexbox  grid-layout 
8
Allinea un elemento in basso con la flexbox
Ho un divcon alcuni bambini: <div class="content"> <h1>heading 1</h1> <h2>heading 2</h2> <p>Some more or less text</p> <a href="/" class="button">Click me</a> </div> e voglio il seguente layout: ------------------- |heading 1 | |heading 2 | |paragraph text | |can have many | |rows | | | | | | | |link-button | …
375 html  css  flexbox 
2
Flexbox non dà uguale larghezza agli elementi
Tentativo di un navigatore flexbox con un massimo di 5 elementi e un minimo di 3, ma non sta dividendo la larghezza equamente tra tutti gli elementi. Violino Il tutorial che sto modellando questo dopo è http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/ SASS * { font-size: 16px; } .tabs { max-width: 1010px; width: 100%; height: …
368 html  css  flexbox 
21
Bootstrap 4 allinea gli elementi della barra di navigazione a destra
Come allineare un elemento della barra di navigazione a destra? Voglio avere il login e registrarmi a destra. Ma tutto ciò che provo non sembra funzionare. Questo è quello che ho provato finora: <div>intorno al <ul>con l'attributo:style="float: right" <div>intorno al <ul>con l'attributo:style="text-align: right" ho provato queste due cose sui <li>tag …
7
Qual è la differenza tra display: inline-flex e display: flex?
Sto cercando di allineare verticalmente gli elementi all'interno di un wrapper ID. Ho dato la proprietàdisplay:inline-flex; a questo ID poiché il wrapper ID è il contenitore flessibile. Ma non c'è differenza nella presentazione. Mi aspettavo che sarebbe stato visualizzato tutto nell'ID wrapper inline. Perché no? #wrapper { display: inline-flex; /*no …
331 css  flexbox 
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.