Flex-wrap xususiyati

flex-wrap xususiyati asosiy o‘q bo‘yicha ko‘p qatorli bloklar joylashuvini belgilaydi. Flex bloklar uchun ota elementga qo‘llaniladi. flex-flow qisqartirilgan xususiyatiga kiradi.

Sintaksis

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

Qiymatlar

Standart qiymat: nowrap.

Misol . Wrap qiymati

Hozir bloklar o‘z konteyneriga sig‘maydi va bir nechta qatorlarda joylashadi:

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

Результат:

Misol . Wrap-reverse qiymati

Endi ketma-ketlik teskari tomonga o‘zgaradi (bloklar ichidagi raqamlarga qarang):

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

Результат:

Misol . Nowrap qiymati

Hozir bloklar bir qatorli rejimda joylashadi (standart holatda). Bunda bloklar uchun width kenglik qiymati e'tiborga olinmaydi, agar u bloklarning ota elementga sig‘ishiga xalaqit bersa. E'tibor bering, bloklar ota elementga sig‘di, lekin ularning haqiqiy kengligi 100px emas, ularga belgilanganidek, balki undan kamroq:

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

Результат:

Misol . Nowrap qiymati

Biroq, agar bloklar ularga belgilangan kenglikda sig‘sa - width xususiyati e'tiborga olinmaydi. Bloklar sonini kamaytiramiz, ularning hammasi sig‘adigan qilib:

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

Результат:

Shuningdek qarang