Centrarea unui grup de elemente flexibile înfășurate [duplicate] (Programare, Html, Css, Flexbox)

Jeanluca Scaljeri a intrebat.

Încerc să centrez un grup de elemente flex înfășurate. HTML-ul arată astfel:

DEMO

Textul de mai sus arată astfel:

Cutiile verzi sunt înfășurate corect, dar ele, ca întreg, nu sunt centrate în zona roșie,

fără a defini o lățime pentru .container deoarece blocul roșu poate avea orice dimensiune, iar eu vreau să încap cât mai multe blocuri unul lângă altul.

Aveți vreo sugestie cum să centrez blocurile verzi împachetate?

UPDATE: Conform acestei postări vechi de 2 ani, nu este posibil. Deci, în cazul meu trebuie să folosesc javascript pentru a rezolva acest lucru. Dar poate că pot folosi CSS Grid Layout

2 răspunsuri
dippas

Nu sunt sigur ce fel de centrare doriți să faceți

Deci, câteva opțiuni:

Opțiunea 1: doar centrează elementele în .container

  • adăugați justify-content: center; la .container în loc de

Opțiunea 2: centrează elementele .container

  • add some width margin:auto la .container

Opțiunea 3: centrează ambele opțiuni de mai sus

Comentarii

  • Thnx pentru ajutor! Prima ta opțiune face într-adevăr ceea ce am nevoie, cu excepția faptului că al patrulea bloc este centrat în loc de aliniat la stânga. –  > Por Jeanluca Scaljeri.
  • trebuie să vă decideți ceva, spuneți că doriți .containersă aveți orice width dar atunci nu va fi mai mult de 390px pentru că îl stabilești în main, deci folosind max-width cu % și margin așa cum am menționat în opțiunile mele nr. 2 și nr. 3, va funcționa. –  > Por dippas.
  • .container nu trebuie să fie mai mare decât părintele său. main este aici 390px dar ar putea la fel de bine să fie lățimea browserului –  > Por Jeanluca Scaljeri.
  • Deci, exact, folosind width în % în .container va funcționa –  > Por dippas.
  • Trebuie să spun că se apropie. Checkout acest lucru jsfiddle. Lățimea containerului este incorectă. –  > Por Jeanluca Scaljeri.
Blackbam

Dacă doriți doar să centrați containerul dați o lățime fixă containerului sau asigurați-vă că lățimea containerului are lățimea așteptată.