28172 sujets

CSS et mise en forme, CSS3

Display : Flex; Flex: 1 100%

Salut tout le monde,

Me revoilà dans le monde xhtml/css après 4 ans d'arrêt…

J'aide un ami à monter un site, je voudrais que ce site soit "responsive" pour faciliter la consultation sur divers supports.

Je découvre qu'il existe du CSS3 (sans blague ?!!) et dont le positionnement avec Flex, le truc qui me faisait rêver à l'époque.

Dans les faits, je me casse les dents. Tiens, je retombe sur ce sujet : http://www.alsacreations.com/article/lire/1388-css3-grid-layout.html qui m'embrouille plus qu'autre chose (bref)

Mon layout sera constitué de 3 blocs :

La largeur maximale 1020px, padding compris et minimale 320 ou 640px

En-tête :
- Logo, moteur de recherche, bannière
- Menu en mode horizontal

Content :
- un bloc B1 qui contient des items au format d'un carré (grid design) qui se met l'un derrière l'autre (non , pas de float svp Smiley biggrin )
- un petit bloc B2 en dessous qui contient des rectangle d'une hauteur 1/2 des carrés ci-dessus.

Footer :
- un rooter tout ce qu'il y a de plus classic.

Je vous mets ci-joint un layout en image du Bloc B1 que je voudrais faire avec la propriété Flex

upload/50801-Sans-titre.png

Vous remarquer qu'il y a un marging ou pudding de 20px (?) dans le container du Bloc B1.

Je voudrais savoir si à partir des éléments que je vous ai communiqués, existe un framework ou une "grille" pour me permettre de me lancer.
Ce qui me chagrine c'est un espacement de 40px entre chaque carré

En vous remerciant.
Merci @gc-nomade pour ta réponse et le temps pour me proposer le css.

Peut-être quelque chose m'échappe mais cette méthode ne permet pas de redimensionner à la volée la largeur du "bloc 1020". Cela est justement du à la présence d'un conteneur de largeur comme celui-ci ?

En effet, ce conteneur aura une largeur maximale 1020px et minimale 640px (cf. class="w60" c-a-d, l'item le plus large).

Ce qui m'amène à reposer la question, le modèle flex est-il al solution pour mes besoins ?


<body>
<div class="header"></div>

<div class="content">
<div class="w60"></div>
<div class="w30"></div>
<div class="w30"></div>
<div class="w30"></div>
</div>

<div class="footer"></div>
</body>


Sachant que Header, Content et Footer ont la même largeur (1020 en maxi et 640 en mini),

J'ai essayé de partir du gabarit : http://www.alsacreations.com/xmedia/tuto/exemples/flexbox/flextest06c.html mais la structure ne fonctionne pas à cause des <aside>

La question finale : flex fonctionne dans un conteneur comme je voudrais l'utiliser ?

Merci encore,
Sujet clos
Aller à