order
Lezione 13 di 15 del corso CSS Flexbox - Il corso completo di Coddy.
La proprietà order definisce la priorità di uno specifico elemento flex.
Per impostazione predefinita, gli elementi flex sono ordinati come nel codice sorgente, ma puoi modificare quest'ordine usando la proprietà order.
La proprietà order riceve un numero come valore: più alto è il numero, maggiore è la priorità dell'elemento flex (che appare alla fine).
Esempio,
.item {
order: 5;
}Il valore predefinito è 0.
Gli elementi con lo stesso valore di
orderseguono l'ordine del codice sorgente.
Sfida
FacileTi viene fornito un flexbox con sei elementi flex; aggiungi la proprietà order agli elementi flex pari (2, 4, 6) in modo che l’ordine degli elementi sia:
1, 3, 5, 2, 4, 6
Puoi usare gli id e le classi HTML per selezionare l’elemento specifico in CSS.
Provalo tu
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>Tutte le lezioni di CSS Flexbox - Il corso completo
Esercitati da solo: Playground Web