Aligner des éléments avec flexbox

Bonjour,

J'aimerais réaliser une page pour afficher les résultats des matchs de football. Avec flexbox, j'ai réussi à mettre le score et les deux équipes sur la même ligne, cependant, je voudrais que les scores soient alignés sur la même colonne, et je ne veux pas utiliser de tableau.

Voici le code html:

Code:

---

1 2 3 4 5

<h3>Vendredi 4 août 2017</h3> <div id="overlay_match"><div id="overlay_heure">20h45</div><div id="overlay_equipe">Monaco</div><div id="overlay_score">3-2</div><div id="overlay_equipe">Toulouse</div></div> * <h3>Samedi 5 août 2017</h3> <div id="overlay_match"><div id="overlay_heure">17h15</div><div id="overlay_equipe">Paris-SG</div><div id="overlay_score">2-0</div><div id="overlay_equipe">Amiens</div></div>

---

Et le code CSS:
#overlay_match

Code:

---

1 2 3 4 5 6 7 8 9 10

{ ****display: flex; ****justify-content: space-around; ****padding: 10px; ****border-radius: 10px; ****text-align: center; ****background: #2C362E; ****position: relative; ****margin:5px; }

---

J'obtiens donc le résultat suivant:
Pièce jointe 355960

Je voudrais que les heures, les équipes (domicile et extérieur) et le score soient aligner, comment faire ?

Merci pour votre aide.

Bonjour,

Il faut définir les largeurs de chaque colonne en %.

N.B. un id doit être UNIQUE !
Mets des classes à la place.

Code:

---

1 2 3

.overlay_match > div { width:25%; }

---

Yes merci beaucoup ça fonctionne, voilà le code pour ceux que ça pourrait aider:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

.id_overlay_equipe,#overlay_heure { font-family: Verdana; color: #F5F5F5; width: 20%; }   #overlay_score { font-family: Verdana; color: black; background-color: white; border-radius: 5px; margin-bottom: 10px; padding-left: 10px; padding-right: 10px; width: 5%; }

---

Pour ce qui est de la différence entre "id" et "class" je n'ai pas vraiment compris ce que ça change mais j'ai quand même modifié mon overlay_equipe en class puisqu'il apparaît deux fois à chaque ligne.

Merci bcp pour ton aide!

Bonjour,

Citation:

---

Envoyé par tengalice49

Pour ce qui est de la différence entre "id" et "class" je n'ai pas vraiment compris ce que ça change mais j'ai quand même modifié mon overlay_equipe en class puisqu'il apparaît deux fois à chaque ligne.
Merci bcp pour ton aide!

---

Pour ceux qui passeraient par là et se demanderaient pourquoi il faut utiliser des classes ici plutôt que des id :
- Un Id est unique, ce qui veut dire que deux éléments différents ne peuvent pas avoir le même id.
- Une même classe peut être affectée à plusieurs éléments afin de leur appliquer un style commun : ici nous voulons chaque section de la ligne alignée donc on leur affecte à toute un width:25% au travers d'une classe

Oui mais en utilisant un id pour appliquer un style à un ou plusieurs éléments ça marche aussi bien qu'avec un class, alors pourquoi utiliser class plutôt que id ? C'est une norme ?

Non ce n'est pas une norme enfin pas tout à fait disons que si tu as cela

Code:

---

1 2	<div id="div1"></div> <div id="div1"></div>

---

Et bien ton code est faux car tu as deux div ayant le même id ce qui est inconcevable. Si tu passes ton code dans un validateur il te dira que cela constitue une erreur.

Pour donner le même style à plusieurs élément il FAUT utiliser une classe et non pas des id.

Sinon tu utilises un id différent pour chaque élément et dans ton css tu leur affecte à tous le même code mais c'est une perte de temps et une très mauvaise pratique, du coup on utilise des classes

Ok ok bon j'ai plus qu'à modifier tous mes id par des class :mouarf:

Peut être pas tous mais en tous cas tu ne dois plus en avoir en plusieurs fois ;)

Bon.
LOXIE à parfaitement expliqué la différence d'utilisation.

Et tu as raison, c'est la norme : Les meilleurs cours et tutoriels pour apprendre le CSS

Bonjour,
la recommandation est assez clair sur ce point
3.2.3.1 The id attribute

Citation:

---

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

---

Bonjour,

Peut être que cela te sera utile plus tard, c'est Juste pour info.

Pour les Flexbox il existe aussi flex-basis qui est mis sur les élément flexibles, elle permet spécifier la taille initiale de l'élément flexible désirée avant réduction ou agrandissement.
Dans ton cas, cela revient au même.

Code:

---

1 2 3

.overlay_match > div { flex-basis:25%; }

---

ou le raccourci flex qui permet en plus de gérer les droits d'agrandissement ou de réduction de l'élément flexible

Code:

---

1 2 3

.overlay_match > div { flex: 1 1 25%; }

---