Flexbox: definizione nel CSS

StephenSoftware · 2019-08-03T08:53:37+0200

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>

Max 1 · 2019-08-03T19:07:44+0200

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 · 2019-08-06T18:50:33+0200

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 · 2019-08-06T21:56:30+0200

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>

StephenSoftware · 2019-08-07T11:29:26+0200

Grazie! Il tuo esempio è stato risolutivo...

Cerca

Cerca

Flexbox: definizione nel CSS

StephenSoftware

Nuovo Utente

Max 1

Super Moderatore

StephenSoftware

Nuovo Utente

Max 1

Super Moderatore

StephenSoftware

Nuovo Utente

Discussioni simili