CSS-ի ֆլեքսներով սալիկապատման խնդիրները

Սալիկապատման առաջին խնդիրը ընդհանուր առմամբ անմիջապես ակնհայտ է - շատ անհարմար է, որ ծնողին պետք է պարզորոշ նշի բարձրությունը: Չէ՞ որ մեզ մոտ միանգամայն հնարավոր է, որ բլոկների քանակը կփոխվի դինամիկորեն, և դրանց քանակը կլինի երբեմն ավելի քիչ, երբեմն ավելի շատ, քան 9-ը:

Իսկ երկրորդ խնդիրը կառաջանա, եթե բլոկների քանակը այնպիսին է, որ վերջին շարքում կլինի անբավարար քանակությամբ բլոկներ: Այս դեպքում վերջին շարքը կերևա սարսափելի.

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
</div>

css.parent {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 320px;
  border: 1px solid red;
}
.child {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Ստացվում է, որ նույնիսկ հորիզոնական ուղղությամբ space-between արժեքը մեր դեպքում վատ է աշխատում:

Ամփոփենք. եթե ձեր ժառանգների քանակը միշտ հաստատուն է և նորմալ տեղավորվում է ծնողի մեջ, ապա space-between-ի վրա հիմնված սալիկապատումը բավականին հարմար բան է: Հակառակ դեպքում պետք է այլ բան մտածել: