Savybė flex-wrap

Savybė flex-wrap nustato daugiaeilę blokų išdėstymą pagal pagrindinę ašį. Taikoma tėviniam elementui, skirtam flex blokams. Įeina į trumpinio savybę flex-flow.

Sintaksė

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

Reikšmės

Numatytoji reikšmė: nowrap.

Pavyzdys . Reikšmė wrap

Dabar blokai netelpa į savo konteinerį ir išsidėstys keliorse eilutėse:

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

Результат:

Pavyzdys . Reikšmė wrap-reverse

O dabar sekos tvarka pasikeis į atvirkštinę (žiūrėkite į skaičius blokuose):

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

Результат:

Pavyzdys . Reikšmė nowrap

Dabar blokai bus išdėstyti vienos eilutės režimu (taip yra pagal nutylėjimą). Tuo pačiu reikšmė pločio width blokams bus ignoruota, jei ji trukdo blokams tilpti į tėvą. Atkreipkite dėmesį, kad blokai sutelpa į tėvą, bet jų tikrasis plotis nėra 100px, kaip jiems nustatyta, o mažesnis:

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

Результат:

Pavyzdys . Reikšmė nowrap

Tačiau, jei blokai telpa su jiems nustatytu plotis - tada savybė width nebus ignoruota. Sumažinkime blokų skaičių kad jie visi tilptų:

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

Результат:

Taip pat žiūrėkite