Flexbox: definizione nel CSS

StephenSoftware

Nuovo Utente
2 Ago 2019
6
0
1
57
ROMA
www.stephensoftware.it
Ciao a tutti,

mi riferisco all'esempio al seguente link https://www.mrw.it/codalo/11.html

Nella definizione del css che riporto di seguito ho provato a sostituire div con box ovvero .flessible > box e nell'html ho provato a scrivere <div style="box">1</div> oppure <div class="box">1</div> ma in entrambi i casi non funziona più l'esempio.

E' vincolante che sia specificato div? Se lascio div, tutti i div della pagina subiscono l'effetto del css?
Grazie fin d'ora per il chiarimento

Ciao a presto
Stefano
HTML:
.flessibile {
  display: flex;
  background-color: #CCCCCC;
}

.flessibile > div {
  background-color: #FF6600;
  color: #FFFFFF;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

<h1>Un semplice esempio di layout flessibile</h1>
<div class="flessibile">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
 
Ultima modifica di un moderatore:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Si è vincolante perchè deve essere un box!
Idiv influenzati saranno solo quelli con la classe "flessibile"

Quando posti del codice come tutti noi sei tenuto per regolamento ad usre i trag CODE, HTML e PHP
Grazie
 

StephenSoftware

Nuovo Utente
2 Ago 2019
6
0
1
57
ROMA
www.stephensoftware.it
Grazie per l'indicazione e scusa per il mancato utilizzo dei TAG, non sono un grande utilizzatore di forum... ma ho visto come fare per inserire pezzi di codice...
Ad ogni modo se i miei box dovessero avere colori, dimensioni, testo e caratteristiche diverse come faccio a riferirmi ad un div spedifico nell'ambito dello stesso contenitore? Qual'è la sintassi da utilizzare?
Grazie
Ciao
Stefano
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Nei box che vuoi diversi devi assegnare una classe diversa ed ad ogni classe nel css dare regole a tuo piacimento
Esempio:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Flessibile</title>
<style>
.flessibile1, .flessibile2, .flessibile3 {
  display: flex;
  background-color: #CCCCCC;
}

.flessibile1 > div {
  background-color: #FF6600;
  color: #FFFFFF;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
.flessibile2 > div {
  background-color: #000080;
  color: #FFFFFF;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
.flessibile3 > div {
  background-color: #008000;
  color: #FFFFFF;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>

<body>
<h1>Un semplice esempio di layout flessibile</h1>
<div class="flessibile1">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="flessibile2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="flessibile3">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
</body>
</html>
 
Ultima modifica:
Discussioni simili
Autore Titolo Forum Risposte Data
U Hover su immagine escluso titolo - flexbox Presentati al Forum 0
U [HTML] Hover su immagine escluso titolo - flexbox HTML e CSS 3
Z Opzione sticky definizione css HTML e CSS 1
PenguinLover definizione di Vendor Lock-in Discussioni Varie 1
C Problema Definizione Classe NUSOAP PHP 0
A Upload con definizione del nome da salvare sul server PHP 6
F definizione variabile array Classic ASP 6
G maschera che si adatta alla definizione schermo Database 0
B Programma per migliorare la definizione di un' immagine Webdesign e Grafica 28
I nome utente non esiste nel database PHP 1
M Vendo il mio sito web teknosurfng.com, che trasmette nel campo della tecnologia Compravendita siti e domini 0
S Problema nel ciclare un json Javascript 0
M Aggiunta prodotti nel carrello con lo stesso in e varianti diverse PHP 0
U PHP creare un file excel dopo ricerca nel DB PHP 0
C prendere dei valori da Plugin e inserirli nel database joomla Joomla 0
MarcoGrazia Trovare record nel database partendo da id non sequenziali PHP 6
L PHP motore di ricerca nel sito PHP 1
R [C#] Fare varie operazioni nel proprio account Facebook .NET Framework 0
M Inviare dati nel db dopo risposta alert PHP 0
A recuperare i dati passati nel post PHP 1
S SEOriented è entrato nel forum Presentati al Forum 0
R inserire video nel sito HTML e CSS 15
Cosina Menu fisso copre i titoli quando cliccati nel sommario jQuery Javascript 4
M Stringa con spazi nel menù a tendina PHP 4
A Inserimento dati nel database tramite form + altre operazioni PHP 18
C Store in PHP nel Database PHP 8
A Problema nel passare la variabile PHP 0
M Problema inserimento parole con apostrofo nel db PHP 5
Shyson Inserire placeholder nel campo cerca PHP 5
P Ciao a tutti nel forum Presentati al Forum 0
M Lanciare alert se il codice fiscale è già presente nel db e lasciare la scelta di inserire all'utente PHP 42
M Salvare coordinate Maps nel DB PHP 2
S [PHP] email con inserimento dati nel database PHP 23
F [PHP] Verifica utente presente nel DB PHP 13
U Posizionamento Rack nel locale tecnico ed eventuali accortezze per evitare incendi Reti LAN e Wireless 1
D [WordPress] Link eliminati ancora presenti nel database, è possibile? WordPress 0
M [PHP] Elenco con "classifica" delle informazioni nel db PHP 3
R Ciao a tutti sono felice di entrare nel forum Presentati al Forum 0
MrSab Nel tentativo di reinventarsi in un mondo che cambia.... Presentati al Forum 0
M [PHP] Problemi su inserimento array nel db PHP 7
L [Javascript]Alternativa al position:sticky nel CSS Javascript 0
M New entry nel forum Presentati al Forum 0
P Jquery event nel foreach php jQuery 3
M [PHP] Stringhe con accento nel POST PHP 3
L PopUp tramite PHP se la mail inserita è già registrata nel database PHP 3
Shyson [PHP] Inserire testo nel codice PHP 2
P Come sponsorizzare nuovi collaboratori nel network marketing sfruttando l'online? Social Media Marketing 2
Cosina Andare a capo nel testo della mail ricevuta dal form php PHP 1
ANDREA20 [PHP] motore di ricerca nel sito PHP 11
G Errore Cannot read property 'childNodes' of undefined per mancanza nodo nel file xml XML 6

Discussioni simili