risposta-alla-domanda-sullo-sviluppo-web-bd.com

Come disporre le anteprime 3x2 quando il loro numero è inferiore a 6?

Sto creando un menu di selezione delle miniature per VR. Sono disposti come 3x2:

enter image description here

Come devo organizzarli quando ci sono meno di 6 miniature? (ad es. 2 o 5?)

Nota: l'utente può vedere la serie di miniature precedente/successiva facendo clic sulle frecce su ciascun lato.

13
alex

Vorrei usare il seguente layout:

Per una quantità irregolare di immagini (5, ad esempio), visualizzerei in questo modo Odd amount of pictures

Per le situazioni in cui esistono solo 4 immagini, visualizzerei in questo modo enter image description here

Per le situazioni in cui esistono solo 2 immagini, visualizzerei in questo modo enter image description here

Il motivo per scegliere questo layout si basa sul fatto che le immagini sono centrate in relazione con altri elementi visivi come le frecce laterali e il pulsante che hai sotto le immagini, quindi tutto il contenuto proviene dal punto centrale della griglia.

Tutte le immagini avrebbero le stesse dimensioni in termini di colonne, quindi l'utente non ha fraintendimenti nel ritenere che se alcune immagini sono più grandi di altre, potrebbero essere importanti/più pertinenti.

24
Joao Carvalho

Pensali come una bootstrap che è cambiata in modo dinamico a seconda della quantità di stanze che potresti avere. Ad esempio, nel caso in cui tu abbia solo 2 stanze, le caselle diventeranno più grande e copre un posto più grande sullo schermo.

Nel caso in cui tu abbia 5 stanze, non ci sono molte cose da fare. Nell'immagine, utilizzo 2 modi diversi di posizionarlo. Il primo più coerente con la griglia e il secondo più bilanciato rispetto allo schermo. Dovrai decidere coerenza vs equilibrio. Per l'esperienza dell'utente, non importa molto perché penso che la griglia sia molto chiara.

Demonstration

6
Dimitra Miha

Se vuoi la simmetria qualcosa di simile:

2:

[__][__]

3:

[__][__]
  [__]

4:

[__][__]
[__][__]

5:

[__][__][__]
  [__][__]

6:

[__][__][__]
[__][__][__]

Anche se sappiamo che 3 immagini si adattano fianco a fianco, vogliamo mantenere la coerenza nelle regole di allineamento, quindi non c'è sorpresa per l'utente.

6
SparK

È sufficiente creare la griglia tramite flexbox, lasciando che la larghezza degli elementi figlio della griglia determini le proprie larghezze, quindi centrare gli elementi in orizzontale.

            <div class="flexbox">
      <div class="flex-child">…</div>
      <div class="flex-child">…</div>
      <div class="flex-child">…</div>
    </div>

    .flexbox {
      display: flex;
      flex: 0 1 auto;
      flex-flow: row wrap;
      justify-content: center;
    }
2
Seth Warburton