Playlist avec boutons

L'objectif est d'aligner sur la droite les boutons avec qui a un texte de taille variable. La meilleure méthode est d'utiliser grid. Pour réaliser cette mise en plage, il faut :

  1. créer une grille d'une colonne avec uniquement le h2
  2. les autres éléments : les boutons doivent être mis sur la même ligne via grid-auto-flow: column; (qui enlève le comportement par défaut qui est d'aller à ligne)
  3. voici l'exemple complet : track list
/*Emmet*/
.box>div*5>((h2>lorem5)+button*3>lorem1)

/*css*/
.box{
	width: 600px;
	margin: 0 auto;
}
.box > div{
	border: 1px solid var(--grey,black);
	padding: 5px 0;
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-flow: column;
}
button{
	align-self: center;
}

Les boutons d'un player audio / vidéo

Le but ici est de réaliser en html / css les boutons d'un player, la barre de défilement doit prendre le maximum de place disponible entre le ou les bouton(s)

La meilleure méthode est d'utiliser le flex. Voici l'exemple complet : Player

Solution avec display:flex; 
/*Emmet*/
.container>.player>((button*3>{$})+.scrubber+button>{$})
	
/*css*/
.container{
	width: 960px;
	margin: 0 auto;
}
.player{
	display: flex;
	align-items: center;
}
.scrubber{
	flex:1;
	background: #8e44ad;
	height: 15px;
}
autre solution avec display:grid; 
.player{
	display:grid;
	grid-template-columns:auto auto auto 1fr auto;
}
Le seul reproche possible est lié au fait que si l'on modifie le html (ajouter / supprimer des boutons), il faut modifier le css alors la méthode précédente est plus resistante.

Centrer parfaitement

Ici l'objectif est de centrer parfaitement en largeur / hauteur plusieurs (quelquesoit le nombre avec un contenu dont on ne connait pas la largeur / hauteur) éléments html dans un bloc. Les display : grid / flex fonctionnent.

Voici l'exemple complet : perfect center

Solution avec display:flex; 
/*Emmet*/
.container>.hero>((h2>lorem10)+(p>lorem70))
	
/*css*/
.container{
	width: 960px;
	margin: 0 auto;
}
.hero{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border:1px solid #2ecc71;
	height: 544px;
}
Solution avec display:grid; 
.hero{
	display:grid;
	justify-items: center;
	align-content:center;
}

Centrer parfaitement 2

Centrer dans un bloc des colonnes lorsque on sait le nombre de colonne mais pas les dimensions du contenu des colonnes.
Ici display:grid; est à privilégier.

Voici l'exemple complet : unknown-content-size.html

/*Emmet*/
.container>
	.know>
		((div>lorem1)+
		(div>lorem30)+
		(div>lorem2)+
		(div>lorem12))

.container{
	width: 960px;
	margin: 0 auto;
}
.know{
	display: grid;
	grid-template-columns: repeat(4,auto);
	justify-content: center;
	align-items: center;
	grid-gap: 20px;
	border:1px solid #2ecc71;
	height: 544px;
}

Les 4 coins

Centrer dans un bloc des colonnes lorsque on sait le nombre de colonne mais pas les dimensions du contenu des colonnes

Voici l'exemple complet : Four corners

/*Emmet*/
.container>.box>.item*4>{$}

/*css*/
.container{
	width: 960px;
	margin: 0 auto;
}

.box{
	width: 500px;
	height: 500px ;
	border: 1px solid #e67e22;
}

.box{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	grid-template-rows: repeat(2,1fr);
	/*grid-template: repeat(2,1fr) / repeat(2,1fr) */
	align-items: end; /*anti strech*/
	justify-items:end;
}
.box>*{
	border: 1px solid #2ecc71;
	padding: 10px;
}
.item:nth-child(1),.item:nth-child(2){
	align-self: start;
}
.item:nth-child(1),.item:nth-child(3){
	justify-self: start;
}