Плітачка на флексах у CSS

Давайце зараз навучымся рабіць плітачку на флексбоксах. Для пачатку размясцім флекс-блокі у некалькі шэрагаў, па тры блок у шэраг.

Для гэтага бацьку флексаў усталюем шырыню ў 300px і flex-wrap у значэнні wrap, а нашчадкам шырыню ў 100px:

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;
}

Результат:

Давайце зараз зробім адлегласць паміж нашымі блокамі па гарызанталі. Для гэтага павялічым шырыню бацькі, каб даць дадатковае месца для адступаў.

Так як у нас тры блока ў шэраг, атрымліваецца што паміж імі па два прамежку. Хай мы хочам, каб кожны прамежак меў шырыню 10px. Атрымаецца, што шырыню бацькі трэба павялічыць на 20px, гэта значыць зрабіць не 300px, а 320px.

Давайце зараз бацьку блокаў зададзім justify-content у значэнне space-between і атрымаем пажаданую адлегласць паміж блокамі:

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;
}

Результат:

Давайце зараз дадамо такую ж адлегласць паміж блокамі і па вертыкалі. Для гэтага можна задаць уласцівасць align-content у значэнні space-between.

Для гэтага, аднак, трэба задаць вышыню бацьку, інакш align-content не будзе працаваць. Давайце ўсталюем вышыню ў 320px. У гэтым выпадку ў нас якраз змясцяцца тры шэрагі блокаў па 100px вышынёй плюс два адступы паміж шэрагамі ў 10px.

Давайце запусцім:

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;
}

Результат:

Усё працуе цудоўна, але ёсць некаторыя праблемы, якія мы разгледзім у наступным уроку.