flexbox

Groupes Escal
1

intéressant et pratique

https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_flexbox_CSS/Utilisation_des_flexbox_en_CSS

--

amicalement (^ö^)
lagrenouille@debian-facile.org
------------------------------------
site: https://chezlagrenouille.fr
chaton: https://www.le-pic.org/
----------------------------------
  

2

Hello

Pour ceux qui s’intéressent aux flexbox :

http://the-echoplex.net/flexyboxes/

http://jackintheflexbox.tumblr.com/

3

et pour s’entraîner , on m'a envoyé ceci::smiley:

Le 26/09/2018 à 14:31, Jean Christophe Villeneuve a écrit :

Hello

Pour ceux qui s'intéressent aux flexbox :

http://the-echoplex.net/flexyboxes/

http://jackintheflexbox.tumblr.com/

Le 26/09/2018 à 09:06, momo a écrit :

intéressant et pratique

Les concepts de base pour flexbox - CSS : Feuilles de style en cascade | MDN

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

--

amicalement (^ö^)
lagrenouille@debian-facile.org
------------------------------------
site: https://chezlagrenouille.fr
chaton: https://www.le-pic.org/
----------------------------------
  

4

J'ajouterais même :

et pour écrire un style sans se faire d'ampoules au bout des doigts :
http://the-echoplex.net/flexyboxes/
Bonne journée,
Yves

Le 26/09/2018 à 14:34, momo a écrit :

et pour s’entraîner , on m'a envoyé ceci::smiley:
Flexbox Froggy - A game for learning CSS flexbox

Le 26/09/2018 à 14:31, Jean Christophe Villeneuve a écrit :

Hello

Pour ceux qui s'intéressent aux flexbox :

http://the-echoplex.net/flexyboxes/

http://jackintheflexbox.tumblr.com/

Le 26/09/2018 à 09:06, momo a écrit :

intéressant et pratique

Les concepts de base pour flexbox - CSS : Feuilles de style en cascade | MDN

_______________________________________________
Spip-avec-escal@rezo.net -https://listes.rezo.net/mailman/listinfo/spip-avec-escal

--

amicalement (^ö^)
lagrenouille@debian-facile.org
------------------------------------
site:https://chezlagrenouille.fr
chaton:https://www.le-pic.org/
----------------------------------
  
_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

5

Le 26/09/2018 à 17:07, Yves_forums a écrit :

J'ajouterais même :
CSS3 Flexbox Layout module - Alsacreations

et pour écrire un style sans se faire d'ampoules au bout des doigts :
http://the-echoplex.net/flexyboxes/

Copieur !

Bonne journée,
Yves

Le 26/09/2018 à 14:34, momo a écrit :

et pour s’entraîner , on m'a envoyé ceci::smiley:
Flexbox Froggy - A game for learning CSS flexbox

Le 26/09/2018 à 14:31, Jean Christophe Villeneuve a écrit :

Hello

Pour ceux qui s'intéressent aux flexbox :

http://the-echoplex.net/flexyboxes/

http://jackintheflexbox.tumblr.com/

Le 26/09/2018 à 09:06, momo a écrit :

intéressant et pratique

Les concepts de base pour flexbox - CSS : Feuilles de style en cascade | MDN

_______________________________________________
Spip-avec-escal@rezo.net -https://listes.rezo.net/mailman/listinfo/spip-avec-escal

--

amicalement (^ö^)
lagrenouille@debian-facile.org
------------------------------------
site:https://chezlagrenouille.fr
chaton:https://www.le-pic.org/
----------------------------------

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

6

Binjour à tertous quiss’réveillent-enfin avec la passion des flexbox !Après 9 mois, c’est quasi un accouchement pour flexbophiles, J’vas en r’dire plus, rappelez vous mes vieux courriels « FLEXSCAL » , celui du 10/01/2018 21:06 à l’origine des formulaires à remplir dans escal

et d’autres sujets tels les « Les FLEX-Suggestions : Les Formulaires flexibles dans Escal »

et aussi celui-ci :



Le 06/01/2018 à 18:28, JASEUR BOREAL a écrit :


## Trouvé sur le web :

Un outil générateur de code FLEXBOX : http://the-echoplex.net/flexyboxes/


### Plein d’exemples http://jackintheflexbox.tumblr.com/

Ouahh ! → Celui-là je le cherchais : comment faire pour bien aligner … les champs de formulaires , centrer le bouton, etc …


## ##
## Des champs de formulaire fluides

Les formulaires HTML, et plus particulièrement les champs input comptent parmi les éléments les plus énervants à styler : ils disposent d’une largeur par défaut (qui n’est jamais celle qu’on souhaite) et ils ne peuvent pas être transformés en display: table-cell sur certains navigateurs.



Pour leur permettre d’être fluides, c’est à dire d’occuper “l’espace restant”, il existe un moyen redoutablement simple et efficace : leur conférer un flex: 1 au sein d’un parent flexbox.



https://codepen.io/raphaelgoetter/pen/MYaaoz?editors=110



- - - - - et plus tard - - - - - - - -




Pour infos, je partage ce tutoriel simple, trouvé et traduit rapidement , il peut servir d’exemple pour adapter la page contact d’Escal avec le système flexbox.


Source : How to Build a Responsive Form With Flexbox https://webdesign.tutsplus.com/tutorials/building-responsive-forms-with-flexbox–cms-26767### Un tutoriel, pour apprendre à tirer parti de flexbox & créer un formulaire réactif.

Ce qui est intéressant (et passionnant en même temps) est que flexbox nous permet de construire notre formulaire sans utiliser de requêtes média.





|

  • |

@+ Le Jaseur en Hauts de France