Flex-wrap xassəsi

flex-wrap xassəsi blokların əsas ox üzrə çoxsətirli yerləşdirilməsini təyin edir. Flex blokların valideyn elementinə tətbiq edilir. flex-flow qısaldılmış xassəsinin tərkib hissəsidir.

Sintaksis

cssselektor {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Qiymətlər

Susmaya görə qiymət: nowrap.

Nümunə . Wrap qiyməti

Hal-hazırda bloklar konteynerə sığmır və bir neçə sətirdə yerləşəcək:

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

css#parent {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  border: 1px solid #696989;
  height: 200px;
  width: 330px;
  margin: auto;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Nümunə . Wrap-reverse qiyməti

İndi isə ardıcıllıq əksinə dəyişəcək (blokların içindəki rəqəmlərə baxın):

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

css#parent {
  display: flex;
  flex-wrap: wrap-reverse;
  flex-direction: row;
  justify-content: space-between;
  border: 1px solid #696989;
  height: 200px;
  width: 330px;
  margin: auto;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Nümunə . Nowrap qiyməti

Hal-hazırda bloklar təksətirli rejimdə (susmaya görə belə) yerləşəcək. Bu zaman bloklar üçün width genişlik qiyməti, əgər blokların valideynə sığmasına mane olursa, nəzərə alınmır. Diqqət edin ki, bloklar valideynə sığır, lakin onların həqiqi genişliyi 100px deyil, onlara təyin edildiyi kimi, daha azdır:

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

css#parent {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  border: 1px solid #696989;
  height: 200px;
  width: 330px;
  margin: auto;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Nümunə . Nowrap qiyməti

Lakin, əgər bloklar təyin edilmiş genişlikdə sığırlarsa, onda width xassəsi nəzərə alınmır. Blokların sayını onların hamısının sığacağı şəkildə azaldaq:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  border: 1px solid #696989;
  height: 200px;
  width: 330px;
  margin: auto;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Həmçinin bax