Svojstvo flex-wrap

Svojstvo flex-wrap postavlja višelinijsko raspoređivanje blokova duž glavne ose. Primenjuje se na roditeljski element za flex blokove. Deo je skraćenog svojstva flex-flow.

Sintaksa

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

Vrednosti

Podrazumevana vrednost: nowrap.

Primer . Vrednost wrap

Sada blokovi ne stanu u svoj kontejner i rasporediće se u nekoliko redova:

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

Результат:

Primer . Vrednost wrap-reverse

A sada će se redosled menjati na obrnut (pogledajte brojeve unutar blokova):

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

Результат:

Primer . Vrednost nowrap

Sada će se blokovi rasporediti u jednolinijskom režimu (tako je podrazumevano). Pritom će vrednost širine width za blokove biti zanemarena, ako sprečava blokove da stanu u roditelja. Obratite pažnju da blokovi jesu smestili u roditelja, ali njihova stvarna širina nije 100px, kao što im je zadato, već manja:

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

Результат:

Primer . Vrednost nowrap

Međutim, ako blokovi stanu sa zadatom im širinom - onda svojstvo width neće biti zanemareno. Smanjićemo broj blokova tako da svi stanu:

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

Результат:

Pogledajte takođe