Pages

Quizz Flex !

contrôle continu

Comment obtenir les figures suivantes ?

Pour chaque figure indiquer le code CSS à écrire !

Exemple :
code I
Solution I:
.flex-conteneur {
display : flex; flex-direction : row-reverse; }









code A
code B
code C

code D
code E




Utiliser le simulateur ! 





1
2

Travail maison

Bootstrap est en environnement de conception qui vous propose "en autre" de créer des grilles

Pour pouvoir utiliser cet environnement, il vous suffit d'ajouter dans le <head> la bibliothèque.


<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

JS Bin on jsbin.com

 Mais pourquoi ne pas créer sa propre grille ?


Création d'une grille en flex !

DM de we

Comment faire pour obtenir un texte centrer

JS Bin on jsbin.com

Etude de cas

Création de notre propre code


Les cartes en flex !

front-end component library



Game : pour apprendre le flex

http://flexboxfroggy.com/#fr

Projet : chalenge

En utilisant le simulateur ( ici ) flex , trouvez les propriétés pour obtenir le résultat suivant :


Aide :

Etude de position

Rechercher dans google
 vincennes1900 

Etudier le code de positionnement.


Etude de position

Modal : how to