CSSda Flekslar bilan Plitochka

Keling, endi fleksbokslar yordamida plitochka qilishni o'rganamiz. Boshlanish uchun fleks-bloklarni bir necha qatorga joylashtiramiz, har bir qatorda uchta blok bo'lsin.

Buning uchun flekslarning ota-onasiga 300px kenglik belgilaymiz va flex-wrap xususiyatini wrap qiymatiga o'rnatamiz, vorislarga esa 100px kenglik belgilaymiz:

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 class="child">9</div>
</div>

css.parent {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  border: 1px solid red;
}
.child {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Keling, endi bloklarimiz orasiga gorizontal joy tashlaymiz. Buning uchun chetlar uchun qo'shimcha joy ochish maqsadida ota-onaning kengligini oshiramiz.

Bizda har bir qatorda uchta blok bo'lgani uchun, ular orasida ikkita bo'shliq paydo bo'ladi. Aytaylik, har bir bo'shliq 10px kenglikka ega bo'lishini istaymiz. Demak, ota-onaning kengligi 20px ga oshirilishi kerak, ya'ni 300px emas, balki 320px bo'lishi kerak.

Keling, endi bloklarning ota-onasiga justify-content xususiyatini space-between qiymatiga o'rnatamiz va bloklar orasida istalgan masofani olamiz:

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 class="child">9</div>
</div>

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

Результат:

Keling, endi bloklar orasiga shunday masofani vertikal ravishda ham qo'shaylik. Buning uchun align-content xususiyatini space-between qiymatiga o'rnatish mumkin.

Biroq, buning uchun ota-onaga balandlik belgilash kerak, aks holda align-content ishlamaydi. Keling, balandlikni 320px ga o'rnatamiz. Bu holda 100px balandlikdagi uch qator blok va ular orasidagi 10px li ikkita bo'shliq joylashadi.

Keling, ishga tushiramiz:

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 class="child">9</div>
</div>

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

Результат:

Hammasi ajoyib ishlayapti, lekin keyingi darsda ko'rib chiqadigan ba'zi muammolar mavjud.