flex-wrap հատկությունը

flex-wrap flex-wrap հատկությունը սահմանում է բլոկների բազմատող դասավորությունը գլխավոր առանցքի երկայնքով: Կիրառվում է զավակների համար flex բլոկներով ծնողական էլեմենտի նկատմամբ: Մտնում է հապավված հատկության՝ flex-flow-ի մեջ:

Շարահյուսություն

cssընտրիչ {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Արժեքներ

Լռելայն արժեքը՝ nowrap:

Օրինակ . wrap արժեքը

Այժմ բլոկները չեն տեղավորվում իրենց կոնտեյներում և կդասավորվեն մի քանի տողերով:

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

Результат:

Օրինակ . wrap-reverse արժեքը

Իսկ այժմ հերթականությունը կփոխվի հակառակի (նայեք բլոկների ներսում գտնվող թվերին):

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

Результат:

Օրինակ . nowrap արժեքը

Այժմ բլոկները կտեղադրվեն միատող ռեժիմով (այդպես է լռելայն): Այս դեպքում width լայնության արժեքը բլոկների համար կանտեսվի, եթե այն խանգարում է բլոկներին տեղավորվել ծնողում: Ուշադրություն դարձրեք, որ բլոկները տեղավորվել են ծնողում, բայց նրանց իրական լայնությունը 100px չէ, ինչպես նշված է նրանց, այլ ավելի քիչ:

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

Результат:

Օրինակ . nowrap արժեքը

Սակայն, եթե բլոկները տեղավորվում են իրենց նշված լայնությամբ - ապա width հատկությունը չի անտեսվի: Նվազեցնենք բլոկների քանակը այնպես, որ նրանք բոլորը տեղավորվեն:

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

Результат:

Տես նաև