Discussion :

[MinceNico]

Bonjour,

J'ai un problème avec un simple design bootstrap (V4). Je n'y arrive pas et je ne trouve pas de solution sur le web (pourtant je pense que c'est un problème souvent rencontré... je dois mal m'y prendre)

Voici ce que je souhaite :


En gros c'est un design 2 colonnes tout simple avec menu à gauche. La zone 4, c'est la zone de contact, donc je ne souhaite pas l'afficher avant la zone 2.
Attention : le problème c'est que la zone 2 est très grande.

Merci par avance,

[Invité]

Bonjour,

Non, ce n'est pas "courant".
Ni le fonctionnement "normal" des flexbox.

Si je me réfère à la structure donnée dans un autre post, tu n'avais pas "2 colonnes", mais "4 blocs, disposés sur 2 colonnes".
"2 colonnes", c'est 1 colonne avec 3 blocs, et une autre avec 1 bloc.
C'est très différents.
Et toute ta problématique vient de là.

[MinceNico]

Bonjour,

oui c'est ca.
Bootstrap V4 est en mobile first. Donc j'arrive à mettre mes blocs en Z1, Z2, Z3, Z4.
Coté Desktop, j'arrive à faire le design également avec 1 ligne, 2 colonnes. Et dans la première colonne, une nouvelle ligne pour mes 3 blocs.
Mais je n'arrive pas à réorganiser en mobile pour que la Zone4 (partie contact) soit après la zone 2.

Je vais peut être voir une solution de contournement en modifiant mon interface.
Edit : Par exemple : 2 blocs contact et l'un s'affiche sur mobile et l'autre sur Desktop. Mais je ne sais pas si c'est "propre"

[NoSmoking]

Bonjour,

Mais je n'arrive pas à réorganiser en mobile pour que la Zone4 (partie contact) soit après la zone 2.

regarde du coté de la propriété order des flex item.

[Invité]

@NoSmoking.
Non. Déjà fait :

• les blocs 1 et 2 prennent la même hauteur,
• les blocs 3 et 4 passent en dessous.

...2 blocs contact et l'un s'affiche sur mobile et l'autre sur Desktop...

C'est ce que j'aurais fait.

Sinon, il faudrait sans doute passer par JavaScript, pour positionner dynamiquement (en absolute ?) les blocs 3 et 4 sous le 2...
Ça me fait penser aussi à :

• Masonry / Packery

[MinceNico]

Merci pour vos réponses,
Effectivement order ne fonctionne pas car j'ai plusieurs row.

Je vais regarder les autres solutions.

[Invité]

ce que tu veux est possible, mais pas en passant par le système de grid Bootstrap.

Par exemple : https://codepen.io/jreaux62/pen/eyyGbL

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="container" id="persoWrap">
    <div class="float-3" style="background-color:green;">
        bloc 1
    </div>
    <div class="float-9" style="background-color:yellow;">
        bloc 2
<p>Haec igitur lex in amicitia sanciatur, ut neque rogemus res turpes nec faciamus rogati. Turpis enim excusatio est et minime accipienda cum in ceteris peccatis, tum si quis contra rem publicam se amici causa fecisse fateatur. Etenim eo loco, Fanni et Scaevola, locati sumus ut nos longe prospicere oporteat futuros casus rei publicae. Deflexit iam aliquantum de spatio curriculoque consuetudo maiorum.
</p><p>
Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.</p>
 
    </div>
    <div class="div-3" style="background-color:purple;">
        bloc 3
      <p>Lorem Ipsum est un générateur de faux textes aléatoires. Vous choisissez le nombre de paragraphes, de mots ou de listes. Vous obtenez alors un texte aléatoire que vous pourrez ensuite utiliser librement dans vos maquettes.
</p>
      <p>
Le texte généré est du pseudo latin et peut donner l'impression d'être du vrai texte.</p>
    </div>
    <div class="div-3" style="background-color:red;">
        bloc 4
    </div>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  #persoWrap > div {
   padding:20px;
  }
@media screen and (min-width: 769px) {
  .float-3 {
    float: left;
    width: 25%;
    margin:0;
  }
  .float-9 {
    float: right;
    width: 75%;
  }
  .div-3 {
    width: 25%;
  }
}

• Il faut adapter le(s) breakpoint(s) et pourcentages pour mettre le(s) même que Bootstrap
• il faut enlever la classe row

CQFC*

* Ce Qu'il Fallait coder

[MinceNico]

Merci c'est astucieux !

[Invité]

Il faut toujours garder l'esprit ouvert. "Aware".

"Y a des gens qui n'ont pas réussi parce qu'ils ne sont pas aware, ils ne sont pas "au courant".
Ils ne sont pas à l'attention de savoir qu'ils existent. Les pauvres, ils savent pas.
Il faut réveiller les gens.
C'est-à-dire qu'y a des gens qui font leur travail, qui font leurs études, ils ont un diplôme, ils sont au contact tout ça.
Tu as un rhume et tu fais toujours "snif". Faut que tu te mouches.
Tu veux un mouchoir ?
Alors y a des gens comme ça qui ne sont pas aware.
Moi je suis aware tu vois, c'est un exemple, je suis aware."

JC Van Damme, philosophe et très souple

[NoSmoking]

Si je m'en réfère à l'exemple donné dans le post #1 (mobile vs desktop) l'utilisation de flex est tout à fait jouable.

Sur base du HTML suivant, structure on ne peut plus simple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<h1>Mobile</h1>
<div class="flex mobile">
  <div>item #1</div>
  <div>item #2</div>
  <div>item #3</div>
  <div>item #4</div>
</div>
<h1>Desktop</h1>
<div class="flex desktop">
  <div>item #1</div>
  <div>item #2</div>
  <div>item #3</div>
  <div>item #4</div>
</div>

en appliquant les CSS commun suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.flex {
  display: flex;
  flex-direction: column;
  height: 20em;
  border: 1px solid #888;
}
.flex div {
  flex-grow: 1;
  margin: .25em;
}
.flex div:nth-child(1) {
  background: #CDE;
}
.flex div:nth-child(2) {
  background: #ECD;
}
.flex div:nth-child(3) {
  background: #DEC;
}
.flex div:nth-child(4) {
  background: #FFA;
}

les seules choses à changer sont les suivantes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.mobile {
  flex-wrap: nowrap;
}
.desktop {
  flex-wrap: wrap;
}
.desktop div:nth-child(2) {
  order: 4;
  height: 100%;
}

il va de soit que c'est une base de travail et cela répond à la demande initiale.

[Invité]

...mais pas en passant par le système de grid Bootstrap.

On est d'accord.
Il faut tout redéfinir spécifiquement.


[EDIT] Ahhhh, mais tu as truandé !! Coquinou !
(j'ai essayé de reproduire ton code à partir du mien)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.flex {
...
  height: 20em;

flex-wrap: wrap; associé à ce height imposé fait que le bloc #2 passe à droite !

Si on n'impose pas de height ici, rien ne va plus !...
et s'il n'est pas suffisant (avec du contenu dedans), non plus : https://codepen.io/jreaux62/pen/xppYaM (à tester en changeant le height: 20em / 30em / 40em)

En réalité, ce qui manque aux flexbox, c'est de pouvoir passer d'une flex-direction: column à flex-direction: row au sein d'une même flexbox, pour un (ou plusieurs) élément(s) donné(s).
Ce qui n'est pas possible, puisque cette propriété est appliquée au parent.

[NoSmoking]

[EDIT] Ahhhh, mais tu as truandé !! Coquinou !
(j'ai essayé de reproduire ton code à partir du mien)

je ne vois pas en quoi, utiliser flex sans un minimum de dimensionnement est presque un non sens, de plus rien n'était préciser à ce sujet d'autant que j'avais prévenu : « il va de soit que c'est une base de travail et cela répond à la demande initiale. »

Un autre approche intéressante est l'utilisation des grid, plus appropriée à mon sens, mais malheureusement non reconnu par IE.

Même structure on ne peut plus simple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<h1>Mobile</h1>
<div class="grid mobile">
  <div>item #1</div>
  <div>item #2</div>
  <div>item #3</div>
  <div>item #4</div>
</div>
<h1>Desktop</h1>
<div class="grid desktop">
  <div>item #1</div>
  <div>item #2</div>
  <div>item #3</div>
  <div>item #4</div>
</div>

en utilisant le CSS suivant, à peine différent

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.grid {
  display: grid;
  grid-template-columns: 100%;
  border: 1px solid #888;
}
.grid div {
  grid-column: 1;
  margin: .25em;
}
.grid div:nth-child(1) {
  background: #CDE;
 
}
.grid div:nth-child(2) {
  background: #ECD;
}
.grid div:nth-child(3) {
  background: #DEC;
}
.grid div:nth-child(4) {
  background: #FFA;
}

le déplacement est réalisé grâce au CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.desktop {
  grid-template-columns: 50% 50%;
}
.desktop div:nth-child(2) {
  grid-column: 2;
  grid-row: 1 /span 3;
/*  grid-row: 1 /span 4; /* si on ne veut pas que les autres items s'étire */
}

Dans ce cas on ne spécifie par de dimension à la boîte et l'effet est le bon même en ajoutant du texte.

[Invité]

Bien joué
Effectivement, les grid semblent pallier à la limitation dont je parlais sur les flex, à savoir pouvoir positionner en "column" ou en "row" un élément au sein d'un même grid.
Même si grid souffre encore d'un manque de compatibilité.

bon, là, on aurait plutôt (pour respecter col3 / col9) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.desktop {
  grid-template-columns: 25% 75%;
}

...utiliser flex sans un minimum de dimensionnement est presque un non sens...

Au contraire !
En quoi "fixer" une dimension est compatible avec le concept de "flexible" ?

BREF ! Comme quoi ce sujet est intéressant !... tout comme la recherche de solutions...

[NoSmoking]

bon, là, on aurait plutôt (pour respecter col3 / col9) :

je te le concède volontiers.

J'ai bien écris « sans un minimum de dimensionnement est presque un non sens » et je m'en vais te dire mon sentiment en vrac.

• Tous d'abord les flex-box ne sont au départ faites pour de la mise en page complète, cela sera super dès que le modèle de grille grid sera 100% opérationnel.

• En mode flex-direction: row et en display:flex l'élément occupe 100% de la largeur de son parent ce qui n'est pas le cas en mode flex-direction: column.

• Lorsque l'on observe les propriétés disponibles, pour les flex containers tel que align-items, justify-content ou encore align-content si l'on n'a pas dimensionné un minimum leur intérêt tombe pratiquement à l'eau.

• Pour les flex items il en est de même avec les propriétés flex-grow, flex-shrink ou encore align-self.

• Sans dimensionnement donc pas mal de possibilité qui sont offertes ne pourront être appliquées.

Dans pas mal de cas d'utilisation que j'ai pu voir, un display: table-xxx, voire même un bon display: inline-block, serait suffisant même si il semble que la dénomination table ait été mal perçue et aurait réveillé de mauvais souvenirs.

En conclusion quoiqu'il en soit, ne boudons quand même pas notre plaisir devant cette avancée !

[Invité]

Je suis d'accord en tous points avec toi.


Qui plus est, on a relevé haut la main le défi proposé* par MinceNico, en proposant plusieurs solutions !

* alors que je le pensais insoluble de prime abord